脚本宝典收集整理的这篇文章主要介绍了箭头函数的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,请注明来意。