ES6中function和箭头函数的this指向问题

• 首先我们看一下下面这个代码：

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定义。