ES6中箭头函数的指向

时间:2022-02-13 18:49:32

今天来说说箭头函数中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的指向是在其被定义是就确定的,并且是不能被改变的。