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