一、普通函数中的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
网友评论