箭头函数中的this,到底是指什么?

387 阅读1分钟

ES6都用了这么久了,现在来写这篇文章感觉有点晚,但是正好昨天做项目的时候纠结了一下这个问题,网上读了几篇排名比较靠前的文章,但都没有完全理解,或者说总觉得文章的说法并不完全正确。 先来看看MDN怎么说: 箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this 就这么简单的一句话,其实已经把箭头函数的this指向完全解释清楚了

废话不多说,看几个例子:

const obj = {
    a: () => {
        console.log(this)
    }
}
obj.a()  //结果为window,很好理解,例子中只有两个作用域,全局作用域和箭头函数自己的作用域,按照定义,它的作用域链上一层就是window
function foo() {
    return(a) => {
        console.log(this.a);
    }
}
var obj1 = {
    a:2
};
var obj2 ={
    a:3
};
foo()() // undefined
foo.call(obj1)() // 2
foo.call(obj2)() // 3  

与传统的函数不同,箭头函数的this不能通过apply,bind,call等方式改变,从定义开始,它的this指向就是确定的,即静态作用域。但是有一点需要注意的是,指向静态不代表值也是静态的。由于它始终指向上一层作用域的this,而上一层作用域只要是函数作用域(在块作用域出现以前,js只有函数作用域和全局作用域),this代表的值就可以通过apply,bind,call的方式改变。所以上例中的结果分别是undefined、2、3