ES6中关于箭头函数中this指向问题

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的值发生了改变

猜你喜欢

转载自www.cnblogs.com/bbct-1993/p/8982921.html