ES6箭头函数中的this指向介绍

一般函数的this

为了搞清楚箭头函数中的this指向，我们需要先清楚一般函数中的this指向。

假如，我们在浏览器中输入：

function o(){
    this.a=5;
}
o();
console.log(window.a);//5

我们会发现，window环境中多了一个变量a，并且其值为5。这是因为作为一般函数的o函数，其中的this指向window。当执行o函数的时候，就给window对象增加了一个a属性。

但是，如果我们在函数内部使用严格模式：

function o(){
    'use strict';
    this.a=5;
}

则会报错：

Uncaught TypeError: Cannot set property 'a' of undefined

意思是不能给undefined设置a属性。显然严格模式下，一般函数中的this指向了undefined。

ES6箭头函数的this指向

在箭头函数出现之前，每个新定义的函数都有其自己的this值。比如，典型的如下：

（1）构造函数的this指向了一个新的对象；

（2）严格模式下的函数的this值为undefined；

（3）如果函数是作为对象的方法被调用，则其this指向了那个调用它的对象。

在箭头函数中呢？

我们先看一个实例：

function s(){
    this.a=5;
    o=()=>{this.b=6;};
    o();
}
s();
window.a;//5
window.b;//6

这里箭头函数中的this还是指向了window，不过它所在的执行环境即s函数中的this也指向window。

如果我们改一下代码：

function s(){
    this.a=5;
    o=()=>{this.b=6;};
    o();
}
var s1=new s();
s1;//{a: 5, b: 6}
window.a;//undefined
window.b;//undefined

我们看到箭头函数的执行环境s函数中this指向新创建的对象，箭头函数中的this便也指向新创建的对象。

由此，我们可以得出猜测：箭头函数的this指向和它执行环境中的this保持一致。

如果我们查阅资料就会发现：

箭头函数会捕获其所在上下文的this作为自己的this，也就是说，箭头函数内部与其外部的this是保持一致的。