重讀this: 箭頭函數中的this

箭頭函數是ES6的新特性，做爲解決傳統函數this指向難以追溯的方案（或者說不想寫function關鍵字），按照部分技術文章的說法箭頭函數中this的指向是固定的，但這樣說容易讓人認爲箭頭函數中的this永遠指向同一個對象，究竟是如何，咱們來一探究竟。

this指向何方

今天從新翻閱了下你不知道的JS，發現它是這麼描述箭頭函數中的this指向的：

箭頭函數中使用了當前的詞法做用域覆蓋了this原本的值，即繼承了當前詞法做用域做爲this使用。

考慮以下代碼：

const word = 'window hello'
const obj = {
    fn: function() {
        setTimeout(() => {
            console.log(this.word)
        })
    },
    word: 'hello'
}

obj.fn()

// hello
// 這是常見的箭頭函數使用方式，綁定父級做用域，
// 避免了以往 const self = this的寫法
複製代碼

那麼此時此刻就能夠無憂慮的調用fn，而不用擔憂fn內層回調的this指向嗎？

顯然是不行的，考慮以下代碼

const word = 'window hello'
const obj = {
    fn: function() {
        setTimeout(() => {
            console.log(this.word)
        })
    },
    word: 'hello'
}

const globalFn = obj.fn;
globalFn();

const obj2 = {
    word: 'world',
    fn: obj.fn
}
obj2.fn();

// 上述代碼的輸出是什麼呢？
// 答案是：globalFn輸出"undefined", obj2.fn輸出"world"
複製代碼

爲何輸出會是這樣的？

對於globalFn來講，此時調用方爲window，globalFn的this指向window，而內部箭頭函數繼承了globalFn的this，因此也指向了window，而const的聲明的變量不在window context上，因此最後輸出undefined。

同理，obj2.fn，調用時fn的this指向obj2，內部箭頭函數繼承了fn的this對象，因此也指向了obj2，此時輸出word。

結論

經過上述兩個例子，咱們能夠發現箭頭函數中的this並不是一成不變，而是老是指向父級的this，而當父級是個function的時候，父級的this在不一樣調用環境下指向不一樣的對象（傳統的this指向），而箭頭函數老是繼承這個this。