箭头函数的this指向

发布时间:2019-08-19 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了箭头函数的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 替换成 => 的话就会出现上述问题,需要注意。

脚本宝典总结

以上是脚本宝典为你收集整理的箭头函数的this指向全部内容,希望文章能够帮你解决箭头函数的this指向所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。