深刻理解ES6箭头函数中的this

简要介绍：箭头函数中的this，指向与通常function定义的函数不一样，箭头函数this的定义：箭头函数中的this是在定义函数的时候绑定，而不是在执行函数的时候绑定。

（1）通常函数this指向在执行是绑定  当运行obj.say()时候，this指向的是obj这个对象。

var x=11;
var obj={
  x:22,
  say:function(){
    console.log(this.x)
  }
}
obj.say();
//console.log输出的是22

（2）所谓的定义时候绑定，就是this是继承自父执行上下文！！中的this，好比这里的箭头函数中的this.x，箭头函数自己与say平级以key:value的形式，也就是箭头函数自己所在的对象为obj，而obj的父执行上下文就是window，所以这里的this.x实际上表示的是window.x，所以输出的是11。

var x=11;
var obj={
 x:22,
 say:()=>{
   console.log(this.x);
 }
}
obj.say();
//输出的值为11

相似的还有：

（3）

var a=11 function test1(){ this.a=22; let b=function(){ console.log(this.a); }; b(); } var x=new test1(); 输出11

 

箭头函数状况：

var a=11; function test2(){ this.a=22; let b=()=>{console.log(this.a)} b(); } var x=new test2(); //输出22

很奇怪对不对，我是这样理解的，ES6中定义的时候绑定this的具体含义，应该继承的是父执行上下文里面的this，切忌是父执行上下文！！！这样就不少箭头函数中的指向不明确就迎刃而解了。

注意：简单对象（非函数）是没有执行上下文的！

深刻理解箭头函数中的this

箭头函数中，this指向的固定化，并非由于箭头函数内部有绑定this的机制，实际缘由是箭头函数根本没有本身的this，致使内部的this就是外层代码块的this。正是由于它没有this，因此也就不能用做构造函数。

咱们能够来模拟ES5中的箭头函数转化：

// ES6 function foo() { setTimeout(() => { console.log('id:', this.id); }, 100); } // ES5 function foo() { var _this = this; setTimeout(function () { console.log('id:', _this.id); }, 100); }

因此在定义对象的时候，定义对象属性，里面的this指向的通常是全局，或者这个对象所在的那个环境中的this。