ES6中箭頭函數的指向

今天來說說箭頭函數中this的指向，這個問題曾經也困擾了不少人。

先看一段代碼

var a = 1;
var obj = {
    a: 2,
    foo: function () {
        console.log(this.a);
    }
}
obj.foo(); // 最終的結果2
           

var a = 1;
var obj = {
    a: 2,
    foo: () => {
        console.log(this.a);
    }
}
obj.foo(); // 最終的結果1
           

第一段代碼的結果，最後輸出的結果是2，是因為function定義的函數中this的指向是在該函數被調用時才确定的，則第一段代碼中的函數是由obj調用的，誰調用指代誰，則輸出的a是2

分析第二段的代碼轉換成ES5的寫法是這樣

var a = 1;
var obj = {};
var _this = this;
obj.a = 2;
obj.foo = function () {
    console.log(_this.a);
}
           

看第二段代碼，首先需要明白箭頭函數中this的指向是在該函數被定義時确定的，而不是在運作時被确定的。第二段代碼裡面箭頭函數是obj中的一個key-value中的value，是以目前obj的詞法作用域中的this就是該箭頭函數中的this，指向window是以this.a==window.a 結果是1

加深記憶，再看一個

function Obj() {
    this.id = 2333;
    this.test = () => console.log(this);
}
var obj2 = new Obj();
obj2.test(); //最後的結果是obj2
           

永遠記得，箭頭函數中this的指向是在其被定義是就确定的，并且是不能被改變的。

PS：以下是我的個人部落格小站，歡迎關注哦

[戳我戳我](https://www.mingyangli.com/blog)