掌握 JavaScript 中的 call()、apply() 和 bind()：控制 this

理解 JavaScript 中的 call()、apply() 和 bind() 方法

在 JavaScript 中，`call()`、`apply()` 和 `bind()` 方法用于控制函数的上下文（“this”），从而确定函数所操作的对象。这些方法允许您使用特定的“this”值调用函数，并且对于管理函数与对象的交互方式至关重要。

1. call() 方法

`call()` 方法允许您使用特定的 `this` 值和单独的参数来调用函数。这是在调用函数时明确设置上下文（`this`）的方法之一。

句法：

functionName.call(thisArg, arg1, arg2, ...);

thisArg：函数内部应该用作 this 的值。

arg1, arg2, ...：传递给函数的参数。

call()示例：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Alice' };

greet.call(person);  // Output: Hello, Alice!

在这个例子中，我们使用 `call()` 来调用 `greet` 函数，其中 `this` 指向 `person` 对象，因此输出为“Hello, Alice!”。

call() 的用例：

调用具有不同上下文的方法：您可以使用 call() 从一个对象借用方法并将其应用于另一个对象。

2.apply() 方法

`apply()` 方法与 `call()` 非常相似，但不是单独传递参数，而是将它们作为数组或类似数组的对象传递。`this` 值仍然设置为指定的对象。

句法：

functionName.apply(thisArg, [arg1, arg2, ...]);

thisArg：函数内部应该用作 this 的值。

[arg1, arg2, ...]：包含要传递给函数的参数的数组或类似数组的对象。

apply()示例：

function sum(a, b) {
  console.log(this.name, a + b);
}

const person = { name: 'Bob' };

sum.apply(person, [5, 10]);  // Output: Bob 15

在这个例子中，`apply()` 用于将参数数组 `[5, 10]` 传递给 `sum` 函数，并且 `this` 值设置为 `person` 对象，因此输出为“Bob 15”。

apply() 的用例：

传递参数数组：如果您有数组形式的参数并想要将它们传递给函数，请使用apply()。

3. bind() 方法

`bind()` 方法会创建一个新函数，当调用该函数时，其 `this` 会设置为提供的值，并允许您预设参数以供将来调用。与 `call()` 和 `apply()` 不同，`bind()` 不会立即调用该函数。相反，它会返回一个您可以稍后调用的新函数。

句法：

const newFunction = functionName.bind(thisArg, arg1, arg2, ...);

thisArg：应该绑定到此的值。

arg1, arg2, ...：要预设的参数。

bind()示例：

function greet() {
  console.log(`Hello, ${this.name}!`);
}

const person = { name: 'Charlie' };

const greetCharlie = greet.bind(person);
greetCharlie();  // Output: Hello, Charlie!

这里，`bind()` 创建了一个新的函数 `greetCharlie`，其中 `this` 被永久设置为 `person` 对象。当调用 `greetCharlie()` 时，它会打印“Hello, Charlie!”。

bind() 的用例：

创建具有固定 this 值的新函数：当您需要创建一个保留特定 this 值的新函数时，bind() 很有用。

call()、apply() 和 bind() 之间的区别

示例：组合 call()、apply() 和 bind()

function introduce(age, city) {
  console.log(`Hi, I'm ${this.name}, I'm ${age} years old and I live in ${city}.`);
}

const person = { name: 'David' };

// Using call
introduce.call(person, 30, 'New York');  // Output: Hi, I'm David, I'm 30 years old and I live in New York.

// Using apply
introduce.apply(person, [30, 'New York']);  // Output: Hi, I'm David, I'm 30 years old and I live in New York.

// Using bind
const introduceDavid = introduce.bind(person, 30, 'New York');
introduceDavid();  // Output: Hi, I'm David, I'm 30 years old and I live in New York.

结论

call() 和 apply() 用于使用指定的 this 值和参数立即调用函数。

bind() 用于创建一个具有指定 this 值和可选预设参数的新函数，但不立即调用它。

call() 对于传递单个参数很有用，而 apply() 则非常适合传递参数数组。

bind() 对于创建一个稍后可以使用固定上下文（this）调用的函数很有用。

这些方法对于控制 JavaScript 中的“this”上下文和处理函数至关重要，尤其是在借用方法或设置事件处理程序的情况下。

**嗨，我是 Abhay Singh Kathayat！**

我是一名全栈开发人员，精通前端和后端技术。我使用多种编程语言和框架来构建高效、可扩展且用户友好的应用程序。

请随时通过我的商务电子邮件联系我：kaashshorts28@gmail.com。

CLIS.CC