JavaScript 中的 this 关键字是一个非常重要且常用的概念，它代表当前函数执行时的上下文对象。this 的指向在 JavaScript 中是非常灵活的，不同的情况下指向不同的对象，下面我们来详细讲解 this 的指向问题。
常见this的绑定
1. 默认绑定
当函数没有明确指定 this 的绑定对象时，即在非严格模式下，this 的指向会默认绑定到全局对象上（在浏览器环境下是 window 对象，在 Node.js 环境下是 global 对象），例如：
function foo() {
console.log(this);
}
foo(); // 在浏览器环境下输出 window 对象，在 Node.js 环境下输出 global 对象
2. 隐式绑定
当函数作为对象的方法进行调用时，this 的指向会隐式绑定到调用该方法的对象上，例如：
const obj = {
name: 'John',
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出 John
在上面的例子中，sayName 方法的调用者是 obj 对象，因此 this 的指向就会隐式地绑定到 obj 对象上，从而访问到 obj 对象的 name 属性。
需要注意的是，如果在对象内部定义一个函数，并将其作为参数传递到其他函数中，那么该函数内部的 this 指向可能会发生改变，例如：
const obj = {
name: 'John',
sayName() {
console.log(this.name);
},
foo() {
setTimeout(this.sayName, 1000);
}
};
obj.foo(); // 在一些情况下会输出 undefined，而不是 John
在上面的例子中，foo 方法内部通过 setTimeout 调用了 sayName 方法，由于 setTimeout 是一个独立的函数调用，因此其中的 this 指向会被绑定到全局对象上，导致 sayName 方法内部访问不到 obj 对象的 name 属性。
3. 显示绑定
通过使用 call、apply 或者 bind 等函数，可以显式地绑定 this 的指向，例如：
function foo() {
console.log(this);
}
const obj = { name: 'John' };
foo.call(obj); // 输出 { name: 'John' }
foo.apply(obj); // 输出 { name: 'John' }
const bar = foo.bind(obj);
bar(); // 输出 { name: 'John' }
在上面的例子中，通过 call、apply 或者 bind 函数，将 foo 函数的 this 指向显式地绑定到 obj 对象上，从而访问到 obj 对象的属性。
需要注意的是，当使用call、apply 或者 bind 函数显式绑定 this 指向时，如果同时使用了默认绑定，那么默认绑定会被忽略。例如：
function foo() {
console.log(this);
}
const obj = { name: 'John' };
foo.call(obj); // 输出 { name: 'John' }
foo(); // 输出全局对象，因为此时使用了默认绑定
在上面的例子中，虽然 foo.call(obj) 显式绑定了 this 指向，但在 foo() 调用时依然使用了默认绑定，因此 this 的指向是全局对象。
4. new 绑定
在使用 new 关键字调用构造函数时，this 的指向会被绑定到新创建的对象上，例如：
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john.name); // 输出 John
在上面的例子中，通过 new 关键字调用 Person 构造函数创建了一个新的对象 john，此时 this 的指向会被自动绑定到新创建的对象 john 上，从而将 name 属性添加到 john 对象中。
需要注意的是，如果构造函数内部返回一个对象，那么 this 的指向会被忽略，返回的对象会被作为新创建的对象返回，例如：
function Person(name) {
this.name = name;
return { age: 20 };
}
const john = new Person('John');
console.log(john); // 输出 { age: 20 }
在上面的例子中，虽然 Person 构造函数内部使用了 this，但返回了一个新的对象 { age: 20 }，因此 this 的指向会被忽略，john 对象会被返回成为 new Person('John') 的结果。
5.箭头展示中this的指向
在箭头函数中，this 的指向是固定的，始终指向外层函数的 this。箭头函数的 this 指向是静态的，一旦确定了指向，就无法更改。例如：
function foo() {
return () => {
console.log(this);
}
}
const obj = { name: 'John' };
const bar = foo.call(obj); // bar 是一个箭头函数
bar(); // 输出 { name: 'John' }
在上面的例子中，foo() 函数返回了一个箭头函数，该箭头函数的 this 指向 foo() 函数的 this，即 obj 对象。当调用 bar() 函数时，箭头函数的 this 指向仍然是 obj 对象，因此输出了 { name: 'John' }。
需要注意的是，如果箭头函数是在全局作用域中定义的，那么它的 this 指向就是全局对象。例如：
const arrow = () => {
console.log(this);
};
arrow(); // 输出全局对象
在上面的例子中，arrow() 是在全局作用域中定义的箭头函数，因此它的 this 指向是全局对象。
需要注意的问题
除了上面提到的情况外，还有一些值得注意的地方：
- 严格模式下的默认绑定
在严格模式下，默认绑定的行为会与非严格模式有所不同。在非严格模式下，如果函数调用不符合任何绑定规则，则默认绑定会绑定到全局对象上。而在严格模式下，如果函数调用不符合任何绑定规则，则默认绑定的 this 值会被设置为 undefined，例如：
function foo() {
'use strict';
console.log(this);
}
foo(); // 输出 undefined
在上面的例子中，虽然 foo() 函数没有任何显式绑定，但在严格模式下，this 的值会被设置为 undefined。
- DOM 事件处理函数中的 this
在处理 DOM 事件时，事件处理函数中的 this 指向的是触发事件的元素。例如：
<button id="my-button">Click me</button>
const button = document.getElementById('my-button');
button.addEventListener('click', function() {
console.log(this); // 输出按钮元素
});
在上面的例子中，事件处理函数中的 this 指向的是按钮元素，因为该函数是通过按钮元素的 addEventListener 方法注册的。
- jQuery 中的 this
在 jQuery 中，大多数方法都会返回 jQuery 对象，以便支持链式调用。在 jQuery 方法链中，this 指向的始终是 jQuery 对象本身，例如：
$('.my-class')
.css('color', 'red') // 返回 jQuery 对象，this 指向的是该对象
.addClass('my-class') // 返回 jQuery 对象，this 指向的是该对象
.on('click', function() {
console.log(this); // 输出点击的元素
});
在上面的例子中，$('.my-class') 方法返回的是 jQuery 对象，后续的方法链中的 this 始终指向该对象。在事件处理函数中，this 指向的是触发事件的元素。
总结
- 默认绑定：在函数调用中，如果没有其他绑定规则适用，则默认绑定到全局对象或
undefined（严格模式下）。 - 隐式绑定：在函数调用中，如果函数作为对象的方法被调用，则隐式绑定到该对象。
- 显式绑定：可以使用
call、apply或bind方法显式指定函数的this。 -
new绑定：在使用new运算符创建新对象时，会自动将this绑定到新对象上。 - 箭头函数绑定：箭头函数的
this始终指向外层函数的this，无法通过call、apply或bind方法更改。 - 严格模式下的默认绑定：在严格模式下，默认绑定的
this值会被设置为undefined。 - DOM 事件处理函数中的
this：在处理 DOM 事件时，事件处理函数中的this指向的是触发事件的元素。 - jQuery 中的
this：在 jQuery 方法链中，this始终指向 jQuery 对象本身，在事件处理函数中指向触发事件的元素。 - 谁在调用函数，
this指向就是谁，不然就是全局对象。
然而，也存在一些特殊情况，其中this的指向不仅仅取决于调用函数的对象。例如，使用call、apply或者bind等方法可以显式地指定函数的this。此外，箭头函数具有固定的词法作用域，其中的this始终指向外层函数的this，而不会被调用方式所改变。
因此，虽然 "谁在调用函数，this 指向就是谁" 可以在一些情况下成立，但为了准确理解 this 的指向，需要考虑更多的因素，如绑定规则、箭头函数和特殊的调用方式。
了解这些绑定规则对于正确理解 JavaScript 中 this 的指向非常重要。
365学习不打烊，可以关注我的公众号：程序员每日三问。每天向你推送面试题，算法及干货，期待你的点赞和关注。
网友评论