箭头函数的this指向

箭头函数的this指向

this

箭头函数的this指向的地方并不是函数调用的词法作用域，而是声明时的词法作用于。详情请看下例：

var fn = function(){
    console.log(this);
}

var obj = {
    prop : fn
}

obj.prop()  //{prop: ƒn}

---

var fn = () => {
    console.log(this);
}

var obj = {
    prop : fn
}

obj.prop()  //Window

上面两段代码中，不同的仅仅是function的声明方式，一个沿用传统的function关键字声明，一个使用了新的 => 箭头函数进行声明，然后这两个this指向的结果完全不同，一个按照传统的方式，指向了被调用的词法作用域，也就是obj，所以this指向了obj，而另一个则是直接指向了声明fn方法的词法作用域，也就是Window。

基于这个新的改变，可以看出ES6在改变javascript以往的不合理的地方下足了功夫。试图希望让javascript变成一门面向对象的强语言的决心。

需要注意的地方

基于新特性，以往在使用匿名函数的时候，不能再随意使用this了，如：

elem.addEventListener("click",function(){
    //this ==> elem 
},false)

elem.addEventListener("click",() => {
    //this ==> 该代码的词法作用域 如 Window 
},false)

这里如果直接按原来的模式将function 替换成 => 的话就会出现上述问题，需要注意。