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

首先先说下正常的 this 指向问题

什么是 this：自动引用正在调用当前方法的.前的对象。

this指向的三种情况

1. obj.fun() fun 中的 this->obj ，自动指向.前的对象

2. new Fun() Fun 中的 this->正在创建的新对象，new 改变了函数内部的 this 指向，导致 this 指向实例化 new 的对象

3. fun() 和匿名函数自调 this 默认->window，函数内部的 this，this 默认是指向 window 的

再说回调函数中的 this 指向问题，我们先来看一个例子

 1 <script>
 2     var Bob={
 3         sname:"鲍勃",
 4         friends:["Jack","Rose","Tom","Jerry"],
 5         intr(){
 6           this.friends.forEach(function(ele){
 7                console.log(this.sname+"认识"+ele);
 8           });
 9         }
10     }
11     Bob.intr();
12 </script>

看结果：

undefined认识Jack
undefined认识Rose
undefined认识Tom
undefined认识Jerry

回调函数中的this默认是指向window的，因为本质上是在函数内callback,并没有.前的对象调用

如何解决：

使用箭头函数

 1 <script>
 2     var Bob={
 3         sname:"鲍勃",
 4         friends:["Jack","Rose","Tom","Jerry"],
 5         intr(){
 6           this.friends.forEach(ele=>{
 7                console.log(this.sname+"认识"+ele);
 8           });
 9         }
10     }
11     Bob.intr();
12 </script>  

结果是：

鲍勃认识Jack
鲍勃认识Rose
鲍勃认识Tom
鲍勃认识Jerry

可以看出箭头函数内的this自动指向了回调函数外层的 this 。

箭头函数中的 this:

　　函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。

　　this 指向的固定化，并不是因为箭头函数内部有绑定 this 的机制，实际原因是箭头函数根本没有自己的 this，导致内部的 this 就是外层代码块的 this。正是因为它没有 this，所以也就不能用作构造函数。

也可使用bind永久绑定this

 1 var Bob={
 2         sname:"鲍勃",
 3         friends:["Jack","Rose","Tom","Jerry"],
 4         intr(){
 5           this.friends.forEach(function(friend){
 6                console.log(this.sname+"认识"+friend);
 7           }.bind(this));
 8         }
 9     }
10     Bob.intr();  

深入理解箭头函数中的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。