ES6箭头函数内this指向问题
function foo(){
console.log(this);
return function(){
console.log(this);
}
}
var fn=foo.call({name:'zx'});//Obj
fn();//window
以上代码为ES5写法,我们再foo函数执行时将其this执行修改为对象{name:'zx'}
,而后将执行结果保存到变量fn中,由于执行结果返回的是一个函数,所以我们将fn再执行一下就可以得到完整的函数执行结果了
从结果来看,函数foo的this指向了我们设置的对象,而其内部函数由于没有调用者(或者说调用者是window),所以它的this指向了window。
那么下面我们再看一下ES6中的写法
function foo(){
console.log(this);
return ()=>{
console.log(this);
}
}
var fn = foo.call({name:'zx'})();//Obj
fn();//Obj
和上面一样,我们将函数foo的this指向修改为{name:'zx'}
,然后依次执行函数,但这时我们发现了由函数foo执行后所返回的函数,即使没有调用者,它的this依然指向了{name:'zx}
;
结论: 箭头函数是没有自己的this的,他们的this其实都是最外层函数的this;所以以下代码的执行结果全为1
function foo() {
return () => {
return () => {
return () => {
console.log('id:', this.id);
};
};
};
}
var f = foo.call({id: 1});
var t1 = f.call({id: 2})()(); // id: 1
var t2 = f().call({id: 3})(); // id: 1
var t3 = f()().call({id: 4}); // id: 1
箭头函数可以让this指向固定化,这种特性很有利于封装回调函数。下面是一个例子,DOM 事件的回调函数封装在一个对象里面。
var handler = {
id: '123456',
init: function() {
document.addEventListener('click',
event => this.doSomething(event.type), false);
},
doSomething: function(type) {
console.log('Handling ' + type + ' for ' + this.id);
}
};