JavaScript 中 this 指向保持的秘密

2023-10-26 03:49:51

在 JavaScript 的世界中，"this" 是一个经常令人困惑的概念。理解它在不同场景中的作用至关重要，尤其是当我们处理对象方法时。本文将深入探讨如何让 JavaScript 中的 "this" 保持正确的指向，提供清晰的示例并分析各种情况。

对象方法中的 "this" 指向

当调用对象的方法时，"this" 关键字指向该对象本身。例如，以下代码片段中，当调用 greet() 方法时，"this" 引用对象 person：

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // 输出: "Hello, my name is John Doe"

失去 "this" 指向的情况

然而，在某些情况下，"this" 可能会失去其预期的指向。例如，当我们将方法赋值给另一个变量时：

const greetFunc = person.greet;
greetFunc(); // 输出: undefined

在上面的代码中，greetFunc() 调用时，"this" 失去了指向 person 对象，因为该方法被重新赋值给变量 greetFunc。当我们调用 greetFunc 时，"this" 指向了全局对象（通常是 window 对象），导致 this.name 为 undefined。

保持 "this" 指向的技术

为了确保 "this" 在对象方法中始终指向正确的对象，有几种技术可以采用：

1. 箭头函数

箭头函数会继承其外层作用域的 "this" 值。因此，以下代码中，即使方法被赋给另一个变量，"this" 仍然指向 person 对象：

const person = {
  name: "John Doe",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const greetFunc = person.greet;
greetFunc(); // 输出: "Hello, my name is John Doe"

2. 绑定

绑定方法会返回一个新函数，该函数的 "this" 值被绑定到指定的上下文。以下代码中，greetBound 函数的 "this" 被绑定到 person 对象：

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const greetBound = person.greet.bind(person);
greetBound(); // 输出: "Hello, my name is John Doe"

3. 显式绑定

显式绑定使用 call(), apply() 或 bind() 方法将 "this" 值显式地指定为函数调用的一部分。以下代码中，greet() 方法的 "this" 值被显式设置为 person 对象：

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet.call(person); // 输出: "Hello, my name is John Doe"