烦人的this问题

1. 纯粹的函数调用

function test(name) {
    console.log(name)
    console.log(this)
}
test('666syc')  //调用函数

它实际完整的写法是下面这样的：

function test(name) {
    console.log(name)
    console.log(this)
}
test.call(undefined, '666syc')

如果你传的 context 就是 null 或者 undefined，那么 window 对象就是默认的 context（严格模式下默认 context 是 undefined），所以这里我们打出来的this是Window对象。

2. 对象中函数的调用

先看代码：

const obj = {
    name: '666syc',
    greet: function() {
        console.log(this.name)
    }
}
obj.greet()  //第一种调用方法
obj.greet.call(obj) //第二种调用方法

同样，第一种调用方法只是第二种调用方法的语法糖。

3. 构造函数中this

构造函数里的this稍微有点特殊，每个构造函数在new之后都会返回一个对象，这个对象就是this。

4. window.setTimeout()和window.setInterval()中函数的调用

window.setTimeout()和window.setInterval()的函数中的this有些特殊，里面的this默认是window对象。

 

番外：箭头函数怎么优化这个烦人的this问题呢？

首先，箭头函数没有自己的作用域，所以箭头函数里的this和它外层this指向一致。

const obj = {
    a: () => {
        console.log(this)
    }
}
obj.a()  //打出来的是window

当然也是由于不能使用call。

const obj = {
    a: function() {
        console.log(this)
        window.setTimeout(() => { 
            console.log(this) 
        }, 1000)
    }
}
obj.a.call(obj)  //第一个this是obj对象，第二个this还是obj对象

const obj = {
    a: function() { console.log(this) },
    b: {
    	c: () => {console.log(this)}
	}
}
obj.a()   //没有使用箭头函数打出的是obj
obj.b.c()  //打出的是window对象！！

obj.a调用后打出来的是obj对象，而obj.b.c调用后打出的是window对象而非obj.b，也不是obj，这表示多层对象嵌套里箭头函数里this是和最最外层保持一致的。

完结撒花，有问题留言讨论哈~~~