【Javascript】如何使用 this 关键字，call()、bind()、apply() 方法

news2024/9/30 5:40:27

学习 call(), apply(), 和 bind() 方法是很重要的，因为它们让你能够控制 JavaScript 中 this 的上下文。在某些情况下，默认的 this 行为可能不符合预期，比如当你从一个对象借用方法到另一个对象，或者是在回调函数中保持正确的上下文时，这些方法提供了灵活性和控制力。通过掌握它们，你可以编写出更加高效、可复用并且上下文感知的函数，这在复杂的应用中尤其有用。

在我们深入了解 call(), apply(), 和 bind() 方法之前，先来了解一下 'this' 关键字及其工作机制。

`'this'` 关键字

让我们通过下面的要点来理解什么时候以及 this 关键字指的是什么：

在一个对象的方法中， this 指向该对象。在对象内部定义的方法中，this 将指向拥有该方法的对象。
在一个普通函数中， this 指向全局对象。在非严格模式下，如果函数是在全局上下文中调用（而不是作为对象的方法），this 指向的是全局对象（在浏览器中是 window）。
在严格模式下的函数中， this 是 undefined。如果函数不是某个对象的方法，并且没有绑定到特定上下文（通过 call, apply, 或 bind），那么在严格模式下 this 将是 undefined。
在事件处理程序中， this 指向接收事件的元素。当触发事件时，this 指向的是触发事件的 HTML 元素。
```
<button onclick="this.style.display='none'">
  点击移除我！
</button>
```
在这里，this 指向的是接收到 onclick 事件的按钮元素本身。

在箭头函数中， this 的行为有所不同。箭头函数没有自己的 this 上下文。相反，this 以词法形式继承自创建箭头函数时周围的上下文。这意味着箭头函数内部的 this 指向的是其外部函数或上下文的 this 值。

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`嗨，我是 ${this.name}`);
    }, 1000);
  }
};

person.greet(); // 输出: 嗨，我是 Alice

在这个例子中，setTimeout 内部的箭头函数继承了 greet 方法的 this，后者指向 person 对象。

`call()` 方法

call() 方法允许你“借用”一个对象上的函数或方法，并用另一个对象来使用它，只需把另一个对象作为第一个参数传递即可。第一个参数成为了函数内部的 this 值，而其他参数紧随其后。

call() 方法并不会创建新的函数；它只是用提供的上下文和参数运行现有的函数。

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " 正准备去 " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.call(person1, "Oslo", "Norway");
// 输出: John Doe 正准备去 Oslo, Norway.

在这个例子中，call() 被用来执行 person 对象中的 fullName 方法，但是使用了 person1 的数据（firstName 和 lastName），附加的参数则是 “Oslo” 和 “Norway”。

`apply()` 方法

apply() 方法和 call() 方法非常相似。主要区别在于参数是如何传递给函数的。使用 apply() 时，你可以将参数作为一个数组（或类数组对象）传递，而不是单独传递。

像 call() 一样，apply() 方法也不会创建新的函数。它立即执行函数，使用提供的上下文 (this 值) 和参数。

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " 正准备去 " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

person.fullName.apply(person1, ["Oslo", "Norway"]);
// 输出: John Doe 正准备去 Oslo, Norway.

在这个例子中，apply() 被用来调用 person 对象中的 fullName 方法，但是上下文 (this) 设置为了 person1。参数 “Oslo” 和 “Norway” 作为一个数组传递。

`bind()` 方法

JavaScript 中的 bind() 方法让你能够设置一个函数或方法的上下文（this 值），就像 call() 和 apply() 一样。然而，不同于 call() 和 apply()，bind() 方法不会立即调用函数。相反，它返回一个新的函数，其中 this 值被设置为你指定的对象。

const person = {
  fullName: function(city, country) {
    console.log(this.firstName + " " + this.lastName + " 正准备去 " + city + ", " + country + ".");
  }
}

const person1 = {
  firstName: "John",
  lastName: "Doe"
}

const func = person.fullName.bind(person1);
func("Oslo", "Norway");
// 输出: John Doe 正准备去 Oslo, Norway.

在这个例子中，bind() 创建了一个新的函数 func，其中 this 值被设置为 person1。这个函数不会立即被调用，但你可以稍后传入参数 “Oslo” 和 “Norway” 来调用它。

示例：带有多上下文的集中式记录器

这里有一个小型但复杂的应用示例，在这个例子中使用 call(), apply(), 或 bind() 可以提高效率——尤其是在处理用于记录目的的函数的部分应用时：

假设你有一个集中式的记录函数，用于记录不同用户执行的动作。使用 bind() 可以有效地将 this 上下文设置为不同的用户，避免了重复代码。

const logger = {
  logAction: function(action) {
    console.log(`${this.name} (ID: ${this.id}) 执行了: ${action}`);
  }
};

const user1 = { name: "Alice", id: 101 };
const user2 = { name: "Bob", id: 202 };

// 为不同的用户创建新的记录函数
const logForUser1 = logger.logAction.bind(user1);
const logForUser2 = logger.logAction.bind(user2);

// 执行动作时无需手动传递用户上下文
logForUser1("login");
// 输出: Alice (ID: 101) 执行了: login

logForUser2("purchase");
// 输出: Bob (ID: 202) 执行了: purchase