无论是工作或者面试中，this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家，避免踩坑。首先我们要知道，在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了，也就是说，this的指向完全取决于函数调用的位置。因为this的取值是作用域环境的一部分，每次调用函数，都会在不同的作用域环境。
1：全局环境中
在浏览器环境严格模式中（区别于node），this默认指向window。立即执行函数，默认的定时器等函数，this也是指向window。
console.log(this === window) // true
function fn(){
console.log(this === window)
}
fn() // true
(function(){
console.log(this === window) // true
})()
setTimeout(function() {
console.log(this === window); //true
}, 500)
2：对象函数中
如果函数作为对象的一个属性被调用时，函数中的this指向该对象。
var x = 10 // 相当于 window.x = 10
var obj = {
x: 20,
f: function(){
console.log(this.x)
},
s: function(){
console.log(this.x) // 20
function fn(){
console.log(this.x)
}
return fn // 函数f虽然是在obj.fn内部定义的，但是它仍然是一个普通的函数，this仍然指向window
}
}
var fn = obj.f
fn() // 10
obj.f() // 20
obj.s()() // 10
首先调用fn()为什么结果为10，因为新建了变量fn，相当于fn = function(){ console.log(this.x)}, 函数中this默认指向window,故输出为10。而 obj.f() 中this 指向obj，所以this.x = obj.x, 输出结果为20。
3：构造函数中
构造函数创建的实例的属性指向构造函数的prototype。
function Man(name){
this.name = name
}
Man.prototype.getName = function(){
// this指向 Man
return this.name
}
const tom = new Man('tom')
console.log(tom.getName()) // 'tom'
// 切记请勿修改构造函数的返回值，将会改变默认指向，比如
function Man(name){
this.name = name
return {
name: 'lily'
}
}
Man.prototype.getName = function(){
// this指向 Man
return this.name
}
const tom = new Man('tom')
console.log(tom.name) // 'lily'
4：箭头函数中
箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的，箭头函数中的this取决于该函数被创建时的作用域环境。
// 第一种情况
var x= 10
var obj ={
x: 20,
f1: function(){
console.log(this.x)
},
f2: () => {
console.log(this.x) // 指向 window
}
}
obj.f1() // 20
obj.f2() // 10
// 第二种情况
var name = "jack"
var man = {
name: 'tom',
f1: function(){
// 这边的this和下面的setTimeout函数下的this相等
var that = this
setTimeout(()=>{
console.log(this.name, that === this) // 'tom' true
}, 0)
},
f2: function(){
// 这边的this和下面的setTimeout函数下的this不相等
var that = this
setTimeout(function(){
console.log(this.name, that === this) // 'jack' false
}, 0)
}
}
man.f1() // 'tom' true
man.f2() // 'jack' false
setTimeout默认指向window，但是，在箭头函数中，this的作用域环境在man内，故this指向了man。也就是说此时的this可以忽略外围包裹的setTimeout定时器函数，看上一层及的作用域。
5：dom节点中
特别在是react中jsx语法中，我们通常要改变dom的this指向，不然获取不到指定的执函数。所以通常需要在函数声明使用bind绑定事件。
// html
<button id="btn">myBtn</button>
// js
var name = 'window'
var btn = document.getElementById('btn')
btn.name = 'dom'
var fn = function (){console.log(this.name)}
btn.addEventListener('click', f()) // this指向 btn
btn.addEventListener('click', f.bind(obj)) // this指向 window
本文涉及到的案例是相对比较常见，如果想更加深入的理解this，可以参考github上的一篇文章 ☛ 传送门
