JavaScript 中的 this 究竟指向谁，箭头函数的 this 有什么不同

1、普通函数

先说说普通函数中的this，各式各样的情况下判断this的指向，可以说是非常刁钻了。判断的时候，只要记住【 this 永远指向调用它的对象，new的时候，指向new出来的对象。】这句话就够了。

看几个例子：

 

//例1
var obj = {
    name: 'latency',
    sayName: function(){
        console.log('name:',this.name);
    }
}
obj.sayName()          //name: latency

例1这个例子很好理解，sayName() 方法是 obj 调用的，所以其中的this指向obj。

 

//例2
var name = 'cheng';
var obj = {
    name: 'latency',
    sayName: function(){
        return function(){
            console.log('name:',this.name);
        }
    }
}
obj.sayName()()          //name: cheng

在例2中，打印出来对的this.name不是obj的name，而是window对象的name属性。这是因为sayName()函数中有个闭包，闭包中的this指向调用这个闭包的对象，也就是window对象，写成下面这样可能更好理解：

 

var fun = obj.sayName();
fun()                  //name: cheng   fun()方法是window对象调用的，其this指向window对象

接下来看一个复杂一点的例子：

 

//例3
var fun = function (a){
    this.a = a;
    return function(b){
        console.log('a+b:', this.a + b);
    }
}((function(a,b){return a})(1,2))
fun(3)                  //a+b: 4

在例3中，首先要明确fun是什么，仔细看代码第7行，我们发现这里有一个立即执行的函数，它的参数也是一个立即执行的函数。

(function(a,b){return a})(1,2) 执行的结果是1，然后再来看看这个立即执行函数：

var fun = function (a){    //a = 1
    this.a = a;            //this.a = 1, 由于立即执行，这里的this指向window，也就是window.a = 1
    return function(b){
        console.log('a+b:', this.a + b);
    }
}(1)

所以fun实际上是这个立即执行函数的结果，也就是说：

var fun = function(b){
    console.log('a+b:', this.a + b);
}

执行fun(3)时，this依然指向window，window.a + b = 1 + 3 = 4

 

以上是普通函数中的this，下面来看箭头函数中的this。

 

2、箭头函数

对于箭头函数的this，也只需要记住一句话【箭头函数没有自己的 this，当在内部使用了 this时，它会指向最近一层作用域内的 this】

上例子，可以把例2改成箭头函数，让它的表现符合我们的预期

 

//例4
var obj = {
    name: 'latency',
    sayName: function(){
        return () => {
            console.log('name:', this.name);
        }
    }
}
obj.sayName()()          //name: latency

在例4中，return的是一个箭头函数，没有把this绑定到自己的内部，使用this时，指向的是上一层的obj。

 

//例5
var name = 'cheng';

function delay(){
    setTimeout(function(){
        console.log('name:', this.name);
    }, 100)
}

function arrowDelay(){
    setTimeout(() => {
        console.log('name:', this.name);
    }, 100)
}

delay.call({name: 'latency'})               //name: cheng
arrowDelay.call({name: 'latency'})      //name: latency

这个例子就可以很清楚的看出箭头函数和普通函数中this的区别。

根据上面两个例子，我们可以总结出，在函数中需要使用闭包的时候，用箭头函数就很方便了，不需要像以前一样使用hack，类似 var context = this;

 

接下来把例1改成箭头函数来实现，看看结果：

 

//例6
var name = 'cheng';
var obj = {
    name: 'latency',
    sayName: () => {
        console.log('name:', this.name) 
    }
}
obj.sayName()       //name: cheng

 

由于sayName()整个函数就是一个箭头函数，没有自己的this，所以this指向的最近一层作用域内的this，也就是window对象。这种情况下，就不适合用箭头函数来实现了。

再看一个例子

 

//例7
var obj = {
    name: 'latency',
    sayName: function(){
        return () => {
          return () => {
            return () => {
              console.log("name:", this.name);
            };
          };
       };
    }
}
obj.sayName()()()()          //name: latency

这个例子可以更好地帮助我们理解【箭头函数没有自己的 this，当在内部使用了 this时，它会指向最近一层作用域内的 this】这句话。这个例子定义了三个箭头函数，它们都没有绑定this到自己的内部，或者说没有改变this的指向，所以this始终指向obj。