ES6中箭头函数的指向

今天来说说箭头函数中this的指向，这个问题曾经也困扰了不少人。

先看一段代码

var a = 1;
var obj = {
    a: 2,
    foo: function () {
        console.log(this.a);
    }
}
obj.foo(); // 最终的结果2

var a = 1;
var obj = {
    a: 2,
    foo: () => {
        console.log(this.a);
    }
}
obj.foo(); // 最终的结果1

第一段代码的结果，最后输出的结果是2，是因为function定义的函数中this的指向是在该函数被调用时才确定的，则第一段代码中的函数是由obj调用的，谁调用指代谁，则输出的a是2

分析第二段的代码转换成ES5的写法是这样

var a = 1;
var obj = {};
var _this = this;
obj.a = 2;
obj.foo = function () {
    console.log(_this.a);
}

看第二段代码，首先需要明白箭头函数中this的指向是在该函数被定义时确定的，而不是在运行时被确定的。第二段代码里面箭头函数是obj中的一个key-value中的value，所以当前obj的词法作用域中的this就是该箭头函数中的this，指向window所以this.a==window.a 结果是1

加深记忆，再看一个

function Obj() {
    this.id = 2333;
    this.test = () => console.log(this);
}
var obj2 = new Obj();
obj2.test(); //最后的结果是obj2

永远记得，箭头函数中this的指向是在其被定义是就确定的，并且是不能被改变的。

 

PS：以下是我的个人博客小站，欢迎关注哦
[戳我戳我](https://www.mingyangli.com/blog)