- 首先我们看一下下面这个代码:
const obj = {
aaa() {
setTimeout(function(){
console.log(this) // windows
}, 1000)
console.log(this) // obj对象
setTimeout(() =>{
console.log(this) // obj对象
})
}
}
问题:箭头函数中的this是如何查找的了?
答案:向外层作用域中,一层一层查找this,直到有this的定义。
对于第一个setTimeout,由于function在调用的时候是通过callback,会把windows当做第一个参数传进去,所以第一个this指向windows;第二个是通过箭头函数的形式没有参数传进去,所以向上一层查找this,也就是obj对象。
- 根据上述结论看下面的代码:
const obj = {
aaa() {
setTimeout(function(){
/* 1 */
setTimeout(function(){
console.log(this) // windows
}, 1000)
/* 2 */
setTimeout(() => {
console.log(this) // windows
}, 1000)
}, 1000)
setTimeout(() =>{
/* 3 */
setTimeout(function(){
console.log(this) // windows
}, 1000)
/* 4 */
setTimeout(() => {
console.log(this) // obj
}, 1000)
})
}
}
上述代码的this指向:
- 第一个不用多说,只要是setTimeout里面function都是传递windows对象;
- 第二个向setTimeout外面一层找,发现在上一个setTimeout的function中,所以还是windows;
- 第三个同第一个,还是windows;
- 第四个箭头函数上面一层还是箭头函数,而箭头函数的调用者是obj,所以是obj。
结论:
只要是setTimeout/setTimeInterval,其中回调函数是用function(){}形式写的,其中的this都指向windows;传递函数不是通过回调函数的方式调用,所以其作用域应该向上一层找,直到找到有this定义。