箭头函数中this
建议先阅读本人对于es5中this的详解 es5中的this详解
箭头函数本身是没有this，导致内部的this就是外层代码块的this
ES6的箭头函数的出现，让很多刚刚入门的前端很少用到
bind()，call()，apply(),但是还是有必要弄懂this
关键词
- 上下文作用域
- 绑定上下文
1. 普通函数和箭头函数比较
- 不使用call
// 1. 不使用call
var str = 'hcc'
let foo = function() {
let str = 'yx'
console.log(this.str)
}
const foo2 = () => {
let str = 'hcc2'
console.log(this.str)
}
foo() //'hcc'
foo2() //'hcc'
// 由于箭头函数的绑定上下文，所有foo2中的this指向为上级作用域即` window `
- 变形： 使用call改变this
var str = 'hcc'
let foo = function() {
let str = 'yx'
console.log(this.str)
}
const foo2 = () => {
let str = 'hcc2'
console.log(this.str)
}
foo.call({a:1}) //undefined
foo2.call({a:1}) //'hcc'
// 由于箭头函数本身没有this,我们通过call改变箭头函数的this是没有效果的，foo2中的this还是指向` window `
2.高级函数的比较
- 箭头函数和普通函数
const foo = function() {
return () => {
console.log(this === window)
}
}
foo.call({a:1})() //false
// foo函数中返回一个箭头函数，对于箭头函数而言，foo函数就是它的执行上下文，通过call绑定foo的this,所以对于箭头函数而言，this就是对象{a:1}
const foo2 = () => {
return () => {
console.log(this === window)
}
}
foo2.call({a:1})() //true
// 对于foo2函数而言，自己本身也是一个箭头函数,返回一个箭头函数，2个都没有this，通过call绑定不会生效，所以找到最外层的` window `
- setTimeout中的this (在箭头函数之前，setTimeout中的this指向的是全局的window，setTimeout中的箭头函数没有this,所以寻找上下文中的this)
function foo() {
setTimeout(() => {
console.log('id:', this.id);
}, 100);
}
var id = 21;
foo() // 21
// 由于通过foo.call(null)调用foo,foo函数的内部this指向window,setTimeout中的箭头函数没有this,所以返回21
foo.call({id: 42}) // 42
// 通过call指定了foo函数执行上下文的this为{id: 42},对于箭头函数而言，foo就是执行上下文，所以返回42
3. 对象中的使用
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);
}
};
handler.init() // 转换 handler.init.call(handler)
解析：当我们执行handler中的init方法的时候，init中的this指向的是handler,所以我们在init方法内部使用的所有箭头函数中的this都会指向handler
拓展
请问下面的代码之中有几个this？
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，就是函数foo的this，所以t1、t2、t3都输出同样的结果。因为所有的内层函数都是箭头函数，都没有自己的this，它们的this其实都是最外层foo函数的this。
