浅谈普通函数中的this、箭头函数中的this以及setTimeout函数中的this

一、普通函数中的this

1、总是指向它的直接调用者，如：obj.fn，fn里的最外层this就指向obj
2、默认情况下（不设置'use strict'），没有直接调用者，this指向window
3、严格模式下（设置'use strict'），this指向undefined
4、当时用call、apply、bind绑定时，this指向绑定对象

补充说明：
（1）call()、apply()方法中，第一个参数均是this的指向，当第一个参数为null、undefined时，默认指向window
（2）bind ()方法和 call() 方法类似，第一个参数是this的指向，从第二个参数开始是接收的参数列表。区别在于bind方法返回值是函数以及bind接收的参数列表的使用

二、setTimeout函数中的this

setTimeout的第一个参数是一个方法/代码串，传入到这个方法内部的this会被改写指向window（记住就行！）

三、箭头函数中的this

1、箭头函数内部的this会指向声明箭头函数时所在作用域（就简单理解为一个函数吧，虽然不太准确）的this，偶尔没有上下文时，this指向window
2、即使call()、apply()、bind()方法也不能改变箭头函数ths的指向

四、实例

1、hello是全局函数，没有直接调用它的对象，也没有使用严格模式，因此this指向window

function hello() { 
        console.log(this);  // window 
}  
hello();

2、hello是全局函数，没有直接调用它的对象，使用了严格模式，因此this指向undefined

function hello() { 
        'use strict';
        console.log(this);  // undefined
}  
hello();

3、hello的直接调用者是obj，因此第一个this指向obj；setTimeout函数中的匿名函数没有直接调用者，因此this指向window

const obj = {
    num: 10,
    hello: function () {
        console.log(this);    // obj
        setTimeout(function () {
            console.log(this);    // window
        });
    }    
}
obj.hello();

4、hello的直接调用者是obj，因此第一个this指向obj；setTimeout箭头函数，this指向最近的函数（它的最近的函数就是setTimeout本身）的this指向，因此this指向也是obj

const obj = {
    num: 10,
    hello: function () {
        console.log(this);    // obj
        setTimeout(() => {
            console.log(this);    // obj
        });
    }    
}
obj.hello();

5、diameter是普通函数，它的直接调用者是obj，因此this指向obj；perimeter是箭头函数，this应该指向上下文函数的this指向，但是这里没有上下文函数对象，就默认为window，而window里边没有radius属性，因此返回值为NaN

const obj = {
    radius: 10,  
    diameter() {    
        return this.radius * 2
    },  
    perimeter: () => 2 * Math.PI * this.radius
}
console.log(obj.diameter())    // 20
console.log(obj.perimeter())    // NaN

五、总结（如有不严谨的地方请指正）

1、首先判断函数是普通函数、setTimeout函数还是箭头函数，是什么函数就按照什么函数的方式走
2、如果是普通函数，再判断是否有直接调用者，有的话就this指向直接调用者
3、setTimeout函数中如果是一个普通函数（无论默认情况还是严格模式），则this都是指向window（因为：传入到这个方法内部的this会被改写指向）
4、setTimeout函数中是一个箭头函数，this指向最近的函数的this的指向
5、凡是箭头函数内部的this均会指向声明箭头函数时所在作用域的this