ES6中关于箭头函数的介绍这里就不多做解释,最近关于箭头函数的this指向很困惑,倒持了一整天,看了不少博客还是有点雾水,但也有所启发,做此纪录。
首先,箭头函数中的this永远指向外层对象
下面举例子:
var x = 11; var obj = { x:22, say:()=>{ console.log(this.x); } } obj.say(); //11
这是一个很简单的例子了,箭头函数say里的this指向外层对象,有的博客称作父级对象,即为window.x,可能有的小朋友会问为什么不是obj里的x,因为say是obj里的属性,并不是对象,因此这个箭头函数是定义在对象obj内的,obj的外层对象并没有,只有window了,所以箭头函数里的this指向window.x
再看下面一个例子
var a = 11; function test(){ this.a = 22; let b =()=>{console.log(this.a)} b(); } var x=new test(); //22
实例化后的x this即指向x,this.a=x.a 所以是22,且window.a的值还是11,稍作修改
var a = 11; function test(){ this.a = 22; let b =()=>{console.log(this.a)} b(); } test(); //22
将实例化改为直接执行test函数,在执行this.a=22时,把window.a=11 覆盖为window.a=22,箭头函数中的this还是指向window,因此结果是22,window.a的值发生了改变