理解 Call、Apply 和 Bind：JavaScript 中的基本方法

最常见的 JavaScript 面试问题。

JavaScript 提供了三种方法来操作this函数中的关键字：call()、apply()和bind()。这些方法允许你更改关键字的上下文this，这对于控制函数的行为非常有用。在本篇博文中，我们将探讨这些方法的工作原理，并提供它们的使用示例。

call();（调用方法）

该call()方法允许您使用指定的值和单独提供的参数来调用函数this。第一个参数call()设置this被调用函数的值，其余参数将作为参数传递给函数。

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

let person = {
  name: "John"
};

greet.call(person, "Alice"); // Output: Hello, Alice! My name is John.

在这个例子中，我们定义了一个greet()需要name参数的函数。我们还定义了一个person带有name属性的对象。然后，我们greet()使用方法调用该函数，并将对象作为值和参数call()传入。就这么简单！只需使用方法调用并根据您的选择提供特定的上下文即可。personthis"Alice"namecall()this

apply();（应用方法）

该apply()方法与方法类似call()，但它接受一个参数数组，而不是单个参数。第一个参数apply()设置this被调用函数的值，第二个参数是要传递给函数的参数数组。

function add(a, b) {
  return a + b;
}

let numbers = [1, 2];

console.log(add.apply(null, numbers)); // Output: 3

在这个例子中，我们定义了一个add()接受两个参数的函数。我们还定义了一个数字数组[1, 2]。然后我们add()使用方法调用该函数，并将值和参数数组apply()传入。nullthisnumbers

bind(); （绑定方法）

该bind()方法返回一个新函数，该函数具有指定的this值以及传递给它的任何参数。该bind()方法不会立即调用该函数，而是返回一个稍后可调用的新函数。

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

let greetPerson = person.greet.bind(person);

greetPerson(); // Output: Hello, my name is John.

在这个例子中，我们定义了一个person对象，该对象具有一个name属性和一个greet()方法，用于将问候语打印到控制台。然后，我们使用该bind()方法创建一个新的函数，greetPerson该函数以该person对象为this值。之后，我们可以调用该greetPerson()函数来打印问候语。

优势

与控制函数行为的其他技术相比，这些方法具有多种优势，包括：

1.明确设置 this关键字

在 JavaScript 中，关键字的值this由函数的调用方式决定。通过使用call()、apply()和bind()方法，您可以显式设置关键字的值this，而不管函数的调用方式。这在处理复杂的代码结构时尤其有用，因为 的值this可能会根据函数的嵌套和调用方式而变化。

2. 传递参数的灵活性

call()和方法apply()允许您以灵活的方式将参数传递给函数。例如，您可以使用apply()方法将参数作为数组传递，这在使用接受可变数量参数的函数时非常有用。这可以使您的代码更加灵活且更易于使用。

3. 使用预定义参数创建新函数

该bind()方法允许您创建一个带有预定义this值和任何传递给它的参数的新函数。当您想创建一个具有特定上下文或参数集的新函数时，这非常有用。然后可以使用新函数代替原始函数，而无需this每次重新定义值或参数。

4.避免重复代码

通过使用call()、apply()和方法，您可以避免重复编写设置值或向函数传递参数的bind()代码。您可以创建一个接受值和参数的函数，然后使用、或方法通过正确的上下文和参数调用该函数。这可以节省您的时间并减少需要编写的代码量。thisthiscall()apply()bind()

概括

总而言之，call()、apply()和bind()方法允许您操作thisJavaScript 函数中的关键字。call()和apply()方法用于立即调用具有指定this值和参数的函数，而bind()方法返回一个具有指定this值的新函数，该函数稍后可调用。这些方法是控制 JavaScript 函数行为的强大工具，可提供灵活性、代码可重用性，并使您的代码更易于阅读和维护。