JS 中各种 this 的指向

在全局执行环境中

无论是否在严格模式下，在全局执行环境中（在任何函数体外部）this 都指向全局对象 window。这是因为在全局执行环境中，没有其他对象可以作为 this 的值。你可以使用 globalThis 获取全局对象，无论你的代码是否在当前上下文运行。

console.log(this); // 输出：Window

在函数内部

在函数内部，this 的值取决于函数被调用的方式。有以下几种常见的调用方式：

• 作为普通函数调用 ：当一个函数作为普通函数调用时，this 的值是 undefined。这是因为普通函数没有自己的执行环境，因此 this 没有明确的指向。

function greet() {
  console.log(this); // 输出：undefined
}

greet();

• 作为方法调用 ：当一个函数作为方法调用时，this 的值是调用该方法的对象。这是因为方法是属于某个对象的，因此 this 指向该对象。

const person = {
  name: "John",
  greet() {
    console.log(this.name); // 输出：John
  },
};

person.greet();

• 作为构造函数调用 ：当一个函数作为构造函数调用时，this 的值是新创建的对象。这是因为构造函数的目的是创建对象，因此 this 指向新创建的对象。

function Person(name) {
  this.name = name;
}

const person = new Person("John");

console.log(person.name); // 输出：John

在严格模式下

在严格模式下，this 的值在全局执行环境中总是指向 undefined。这是因为严格模式禁止在全局执行环境中使用 this，除非使用 globalThis。

"use strict";

console.log(this); // 输出：undefined

其他情况

除了以上常见的情况之外，还有其他一些情况下 this 的值可能会发生变化。例如：

• 在箭头函数中 ：箭头函数没有自己的执行环境，因此 this 的值取决于其父级作用域的 this 值。

const person = {
  name: "John",
  greet: () => {
    console.log(this.name); // 输出：undefined
  },
};

person.greet();

• 在事件处理函数中 ：事件处理函数的 this 值通常是触发该事件的元素。

document.getElementById("btn").addEventListener("click", function() {
  console.log(this); // 输出：HTMLButtonElement
});

总结

在 JavaScript 中，this 是一个特殊变量，表示正在执行代码的对象。this 的值取决于函数被调用的方式以及执行环境。在全局执行环境中，this 指向全局对象 window。在函数内部，this 的值取决于函数被调用的方式。在严格模式下，this 的值在全局执行环境中总是指向 undefined。在箭头函数和事件处理函数中，this 的值可能会有所不同。理解和正确使用 this 关键字对于编写健壮和可维护的 JavaScript 代码至关重要。