this 在 JavaScript 中的理解（深度解析）
2023-10-22 19:40:18
JavaScript 中 this 的工作原理：理解调用上下文
在 JavaScript 的世界中，this 扮演着至关重要的角色，它指向当前函数的调用上下文，即触发函数执行的对象或环境。理解 this 的工作原理对于编写健壮且可维护的 JavaScript 代码至关重要。
1. 方法调用：this 指向对象
当一个函数作为对象的方法被调用时，this 的值指向该对象。例如：
const person = {
name: "John",
greet() {
console.log(`Hello, my name is ${this.name}.`);
},
};
person.greet(); // 输出：Hello, my name is John.
在这个例子中，当 person.greet() 被调用时，this 的值指向 person 对象，因为 greet() 是作为 person 对象的方法被调用的。
2. 函数调用：this 指向全局对象
当一个函数作为独立函数被调用时，this 的值指向全局对象。在浏览器中，全局对象是 window 对象，而在 Node.js 中，全局对象是 global 对象。例如：
function greet() {
console.log(`Hello, my name is ${this.name}.`);
}
greet(); // 输出：Hello, my name is undefined.
在这个例子中，当 greet() 被调用时，this 的值指向 window 对象，因为 greet() 是作为独立函数被调用的。
3. 构造函数调用：this 指向新创建的对象
当一个函数作为构造函数被调用时，this 的值指向新创建的对象。例如：
function Person(name) {
this.name = name;
}
const person = new Person("John");
console.log(person.name); // 输出：John
在这个例子中，当 Person() 被调用时，this 的值指向新创建的 person 对象，因为 Person() 是作为构造函数被调用的。
4. 箭头函数：this 继承自外层函数
箭头函数没有自己的 this 值。箭头函数的 this 值继承自其外层函数或全局对象。例如：
const person = {
name: "John",
greet: () => {
console.log(`Hello, my name is ${this.name}.`);
},
};
person.greet(); // 输出：Hello, my name is undefined.
在这个例子中，当 person.greet() 被调用时，this 的值指向 window 对象，因为 greet() 是作为箭头函数定义的。
严格模式和非严格模式下的 this
在严格模式下，this 的值永远不会指向全局对象。如果一个函数在严格模式下被调用，但没有明确的 this 值，那么 this 的值将是 undefined。例如：
"use strict";
function greet() {
console.log(`Hello, my name is ${this.name}.`);
}
greet(); // 输出：Hello, my name is undefined.
在这个例子中，当 greet() 被调用时，this 的值是 undefined，因为 greet() 是在严格模式下定义的，并且没有明确的 this 值。
在非严格模式下，this 的值可以指向全局对象。如果一个函数在非严格模式下被调用，但没有明确的 this 值，那么 this 的值将是全局对象。例如：
function greet() {
console.log(`Hello, my name is ${this.name}.`);
}
greet(); // 输出：Hello, my name is undefined.
在这个例子中，当 greet() 被调用时，this 的值是 window 对象，因为 greet() 是在非严格模式下定义的，并且没有明确的 this 值。
总结
JavaScript 中的 this 关键字是一个强大的工具，用于确定函数的调用上下文。理解 this 的工作原理对于编写可维护和可预测的代码至关重要。
常见问题解答
- 什么是
this关键字？
this 关键字指向当前函数的调用上下文，即触发函数执行的对象或环境。
this的值在什么时候确定？
this 的值在运行时确定，这意味着它可以根据函数的调用方式而改变。
- 在方法调用中，
this指向什么？
在方法调用中，this 指向包含该方法的对象。
- 在函数调用中，
this指向什么？
在函数调用中，this 指向全局对象，除非该函数是在严格模式下定义的。
- 箭头函数的
this值如何确定？
箭头函数的 this 值继承自其外层函数或全局对象。
