同樣的功能，我用ES6的arrow和傳統(tǒng)的func寫法，結(jié)果為何不同？

我在學(xué)習(xí)vue的過程中，有一個動態(tài)過濾內(nèi)容的demo，代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <style>
        p{
            width:100px;
            height:100px;
            background-color: red;
            margin:20px auto;
        }
    </style>
</head>
<body>
<div id="itany">
    <input type="text" v-model="name">

        <p v-for="(v,k) in arr2" :key="k" v-show="flag">
            {{v}}
        </p>

</div>
<script>
    var vm = new Vue({
        el:'#itany',
        data:{
            flag:true,
            arr:['tom', 'jack','mike','alice','alex','mark'],
            name:''
        },
        computed:{

            arr2:function () {
                var temp=[];
                this.arr.forEach(function (val) {
                    if(val.includes(this.name)){
                        temp.push(val);
                    }
                });
                return temp;
            }

//            arr2:function () {
//                var temp=[];
//                this.arr.forEach(val=> {
//                    if(val.includes(this.name)){
//                        console.log(val);
//                        temp.push(val);
//                    }
//                });
//                return temp;
//            }


        }
    })
</script>
</body>
</html>

我使用被注釋掉的arr2就可以完成動態(tài)篩選，但是沒有注釋掉的arr2就不可以動態(tài)篩選。我想知道ES6的arrow和傳統(tǒng)的function定義，在這里的區(qū)別是什么？

回答

編輯回答

悶油瓶

https://jsfiddle.net/xuxiaofe...
上面是一個例子，你可以打開控制臺跑一下看看，匿名函數(shù)內(nèi)外this的區(qū)別
普通匿名函數(shù)的this指向window
而arrow函數(shù)中的this就是函數(shù)外部環(huán)境的this
所以你寫在普通函數(shù)中的this.name始終為空，計算屬性也就始終返回空數(shù)組

2017年5月20日 04:22

編輯回答

尛憇藌

你在函數(shù)里面聲明 var that = this, 讓that暫時保存當(dāng)前環(huán)境的作用域，然后that.name就可以了，具體原因，樓上已經(jīng)給出答案了

2018年4月5日 19:10

編輯回答

入她眼

就是this的指向問題，es6 寫法里的 this 才是指向vue實例，你可以console出來試試

2018年6月7日 09:03

編輯回答

伐木累

箭頭函數(shù)和普通函數(shù)最大的區(qū)別就是this指針的指向,箭頭函數(shù)的this綁定外層作用域的this，在這里箭頭函數(shù)的this指向vue示例，所以正常。而匿名函數(shù)的this指向window對象，所以this.name并不是你輸入框輸入的內(nèi)容，而是window對象的name屬性的值，所以不能正常篩選。你可以通過以下代碼驗證我的想法。

arr2:function () {
    var temp=[];
    this.arr.forEach(function (val) {
        console.log(this)  // 控制臺可以看到this指向window
    });
    return temp;
}

this指針的指向是js中的一個難點，這里只是簡單說了下。如果還有不懂的地方，歡迎交流

2017年4月1日 18:18

編輯回答

久愛她

箭頭函數(shù)的this指向他的父函數(shù)。要理解這句話有幾個關(guān)鍵點：
1.js函數(shù)調(diào)用棧。js的運行都是在函數(shù)調(diào)用棧中運行的，棧（先進后出），最底下是全局環(huán)境，然后根據(jù)代碼執(zhí)行時遇
到的函數(shù)，加載函數(shù)環(huán)境。
2.執(zhí)行上下文。在被壓入函數(shù)調(diào)用棧的時候會創(chuàng)建當(dāng)前函數(shù)的執(zhí)行上下文，執(zhí)行上下文有創(chuàng)建和執(zhí)行兩個階段。
創(chuàng)建階段包括：創(chuàng)建作用域鏈、創(chuàng)建變量對象、確認(rèn)this指向。
執(zhí)行階段包括：變量對象變成活動對象
當(dāng)前函數(shù)執(zhí)行完畢后銷毀執(zhí)行上下文。
3.箭頭函數(shù)在生成執(zhí)行上下文的時候沒有確認(rèn)this的指向，而是直接拿取函數(shù)調(diào)用棧上一層的執(zhí)行環(huán)境的this對象

你這里的代碼中，用了this.name,這里的兩個this指向是不同的

2018年4月25日 03:55