💡无论是工作或者面试中，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 obj.s()执行返回fn，然后 fn（）的值为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取决于该函数被创建时的作用域环境。
1: var name = "window"; var A = { name: "A", B: { name: "B", sayHello1: () => { console.log(this); //Window console.log(this.name); }, sayHello2: function () { console.log(this); //B console.log(this.name); }, }, }; A.B.sayHello1(); A.B.sayHello2(); 2: var name = "jack"; var man = { name: "tom", f1: function () { // 这边的this和下面的setTimeout函数下的this相等 var that = this; console.log(this); // man setTimeout(() => { console.log(this.name, that === this); // 'tom' true }, 0); }, f2: function () { // 这边的this和上面的setTimeout箭头函数下的this不相等，这里的this指向man var that = this; console.log(this); // man setTimeout(function () { console.log(this); // window console.log(this.name, that === this); // 'jack' false console.log(that.name, that === this); // 'tom' 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
