重读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。