JS 基礎篇（九）：Different Situations of `this` Pointer
2023-09-17 05:39:37
深入探究 JavaScript 中的 this 指向：全面指南
JavaScript 中的 this 是一个功能强大的工具，可以帮助你编写健壮可靠的代码。理解 this 的行为对于任何 JavaScript 开发人员来说都是至关重要的。在这篇全面的指南中，我们将深入探讨 this 的不同作用域及其在各种场景中的行为。
理解 this 指向
在 JavaScript 中，this 关键字指向当前执行代码的作用域中的对象。这个对象可以是全局对象（如 window）、正在创建的实例（在构造函数中）或包含该代码块的对象（在方法中）。
全局环境
在全局环境中（例如，在脚本的顶层），this 指向全局对象。在浏览器中，全局对象是 window 对象，而在 Node.js 中，它是全局对象。
构造函数
在构造函数中，this 指向正在创建的新实例。例如，考虑以下 Person 构造函数：
function Person(name) {
this.name = name;
}
当创建一个新的 Person 实例时，this 会指向该实例，并将 name 参数值分配给该实例的 name 属性：
const person1 = new Person('John Doe');
console.log(person1.name); // 输出：'John Doe'
对象中使用
在对象方法中，this 指向包含该方法的对象本身。例如，考虑以下 person 对象：
const person = {
name: 'John Doe',
getName: function() {
return this.name;
}
};
console.log(person.getName()); // 输出：'John Doe'
计时器中
在计时器（如 setTimeout 和 setInterval）中，this 默认指向全局对象（window）。但是，如果你希望 this 指向特定对象，可以使用箭头函数，箭头函数的 this 指向继承自函数定义时的作用域，而不是函数调用时：
const person = {
name: 'John Doe',
getName: function() {
setTimeout(() => {
console.log(this.name); // 输出：'John Doe'
}, 1000);
}
};
person.getName();
箭头函数
箭头函数（() => {}）的 this 指向继承自函数定义时的作用域，而不是函数调用时。例如，考虑以下箭头函数 getName，它的 this 指向对象 person：
const person = {
name: 'John Doe',
getName: () => {
return this.name;
}
};
console.log(person.getName()); // 输出：'John Doe'
特殊情况
在某些特殊情况下，this 的行为可能会有所不同。例如，当一个函数作为另一个函数的参数传递时，this 的指向可能会改变。通常可以使用箭头函数或明确绑定 this 来解决这种情况。
对象方法中的计时器结合箭头函数
当在对象方法中使用计时器（如 setTimeout 和 setInterval）时，this 默认指向全局对象（window）。要让 this 指向特定对象，可以使用箭头函数。例如，考虑以下 person 对象的方法 getName，该方法使用箭头函数和 setTimeout 来延迟执行：
const person = {
name: 'John Doe',
getName: function() {
setTimeout(() => {
console.log(this.name); // 输出：'John Doe'
}, 1000);
}
};
person.getName();
事件绑定
在事件绑定（如 addEventListener）中，this 指向绑定事件的元素。例如，以下代码为一个按钮绑定了一个点击事件，当按钮被点击时，this 会指向该按钮元素：
const button = document.getElementById('myButton');
button.addEventListener('click', function() {
console.log(this.id); // 输出：'myButton'
});
原型中
在原型中，this 指向原型对象本身。例如，以下代码定义了一个 Person 原型，它包含一个 getName 方法：
function Person() {}
Person.prototype.getName = function() {
return this.name;
};
const person = new Person();
person.name = 'John Doe';
console.log(person.getName()); // 输出：'John Doe'
结论
this 指向在 JavaScript 中是一个重要且强大的概念。理解 this 的行为对于编写健壮的 JavaScript 代码至关重要。通过遵循本文中概述的原则，你可以更有效地使用 this 并提升你的 JavaScript 技能。
常见问题解答
-
如何在全局环境中访问
this？
在全局环境中，this指向全局对象（window或全局对象）。 -
如何在构造函数中使用
this？
在构造函数中，this指向正在创建的新实例。 -
如何在对象方法中使用
this？
在对象方法中，this指向包含该方法的对象本身。 -
如何在计时器中更改
this的指向？
可以使用箭头函数在计时器中更改this的指向，箭头函数的this指向继承自函数定义时的作用域。 -
为什么在事件绑定中
this指向绑定事件的元素？
在事件绑定中，this指向绑定事件的元素，因为该元素是事件处理函数执行时的当前作用域。
