返回
JavaScript 中的 this 到底是什么鬼？一文看懂，秒变大神！
前端
2023-04-26 10:41:26
JavaScript 中的 this ：揭秘指向当前执行上下文的特殊变量
什么是 this？
在 JavaScript 中，this 扮演着一个至关重要的角色，它是一个特殊变量，指向当前函数的执行上下文。换句话说，this 决定了函数运行时可以访问的对象。
执行上下文
理解 this 的关键在于了解执行上下文。执行上下文决定了 this 的值，它可以分为两种类型：
- 全局执行上下文： 当 JavaScript 程序启动时创建的，其中的 this 指向全局对象（即 window 对象）。
- 函数执行上下文： 当函数被调用时创建的，其中的 this 指向调用该函数的对象。
this 的用法
this 有多种用途，其中包括：
- 访问对象属性和方法： this 可用于访问当前对象（调用函数的对象）的属性和方法。例如：
const person = {
name: "John",
age: 30,
};
console.log(person.name); // 输出："John"
console.log(person.age); // 输出：30
- 调用对象方法： this 可用于调用当前对象（调用函数的对象）的方法。例如：
const person = {
name: "John",
greet: function () {
console.log(`Hello, my name is ${this.name}.`);
},
};
person.greet(); // 输出："Hello, my name is John."
- 作为事件处理程序： this 可用作事件处理程序，当事件触发时，this 指向触发该事件的元素。例如：
const button = document.querySelector("button");
button.addEventListener("click", function () {
console.log(this); // 输出：button 元素
});
this 的常见问题
使用 this 时，可能会遇到一些常见问题：
- 为什么 this 的值有时会是 null 或 undefined？ 如果函数未被调用，或者函数中的 this 指向一个不存在的对象，那么 this 的值将为 null 或 undefined。
- 为什么 this 的值有时会是 window？ 如果函数是在全局上下文中调用的，或者函数中的 this 指向全局对象，那么 this 的值将为 window。
- 如何更改 this 的值？ 通常，不能直接更改 this 的值，因为 this 的值由执行上下文决定。但是，可以通过使用 call()、apply() 或 bind() 方法间接更改 this 的值。
总结
this 是 JavaScript 中一个强大的工具，它允许我们访问对象属性和方法、调用对象方法，以及作为事件处理程序。理解 this 的含义及其用法对于编写高质量的 JavaScript 代码至关重要。
常见问题解答
- this 的值为什么在箭头函数中不同？ 箭头函数没有自己的执行上下文，因此它们继承父函数的执行上下文，并且 this 绑定到该父函数。
- 为什么在构造函数中使用 new 时 this 指向不同的对象？ 当使用 new 关键字调用函数时，将创建一个新的对象，并且 this 指向该新对象。
- 如何使用 call() 方法更改 this 的值？ call() 方法允许我们指定函数的 this 值，即使该函数不是作为对象方法调用的。
- 如何使用 bind() 方法更改 this 的值？ bind() 方法返回一个新函数，该函数具有指定的 this 值。
- this 和 self 有什么区别？ 在 JavaScript 中，this 和 self 通常是相同的，self 有时用作 this 的别名。
