了解 JavaScript 中 call()、apply() 和 bind() 方法的细微差别

2024-02-17 08:30:57

从 call()、apply() 到 bind()：JavaScript 函数调用的艺术

JavaScript 中的函数调用机制提供了强大的灵活性，使我们能够控制函数调用的上下文和参数。call()、apply() 和 bind() 方法是实现此控制的关键工具，每种方法都具有其独特的用途和细微差别。本文将深入探讨这些方法，帮助您掌握 JavaScript 中函数调用的艺术。

call() 方法

call() 方法通过将指定的对象作为函数的 this 值来调用函数。它的语法如下：

function.call(thisArg, arg1, arg2, ...)

其中：

thisArg ：指定函数调用的 this 值。
arg1、arg2、... ：传递给函数的额外参数。

例如：

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

person.greet(); // "Hello, my name is John."

const boundGreet = person.greet.bind(window);
boundGreet(); // "Hello, my name is undefined."

const calledGreet = person.greet.call(window);
calledGreet; // "Hello, my name is undefined."

在上面的示例中，greet() 方法最初作为 person 对象的方法被调用，this 值指向 person 对象。但是，当使用 bind() 将它绑定到 window 对象后，this 值被绑定到了 window 对象上，导致调用 greet() 时 this.name 为 undefined。而使用 call()，我们显式地传递 window 对象作为 this 值，从而保留了预期的行为。

apply() 方法

apply() 方法与 call() 方法类似，但它接受一个数组作为函数的参数，而不是逐个列举参数。它的语法如下：

function.apply(thisArg, [arg1, arg2, ...])

其中：

thisArg ：指定函数调用的 this 值。
[arg1, arg2, ...] ：传递给函数的参数，存储在数组中。

例如：

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

person.greet("Hello", "John"); // "Hello, my name is John."

const boundGreet = person.greet.bind(window);
boundGreet("Hi", "John"); // "Hi, my name is undefined."

const appliedGreet = person.greet.apply(window, ["Howdy", "John"]);
appliedGreet; // "Howdy, my name is John."

在上面的示例中，greet() 方法接受两个参数：greeting 和 name。使用 apply()，我们将参数存储在一个数组中，然后将其传递给方法。这允许我们以更简洁的方式调用带有可变数量参数的函数。

bind() 方法

bind() 方法创建一个新的函数，该函数被永久绑定到指定的 this 值。它的语法如下：

function.bind(thisArg, arg1, arg2, ...)

其中：

thisArg ：指定函数调用的 this 值。
arg1、arg2、... ：传递给函数的额外参数，这些参数将被预先绑定到返回的函数中。

例如：

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

const boundGreet = person.greet.bind(window);
boundGreet(); // "Hello, my name is undefined."

const calledGreet = boundGreet.call(person);
calledGreet; // "Hello, my name is John."

在上面的示例中，bind() 方法创建了一个新函数 boundGreet，该函数始终将 this 值绑定到 window 对象上。即使我们稍后使用 call() 方法调用 boundGreet，this 值仍然不会被覆盖。

比较 call()、apply() 和 bind()

方法	语法	传递参数	用途
call()	`function.call(thisArg, arg1, arg2, ...)`	逐个列举参数	改变函数的 this 值，手动指定参数
apply()	`function.apply(thisArg, [arg1, arg2, ...])`	数组形式的参数	改变函数的 this 值，参数存储在数组中
bind()	`function.bind(thisArg, arg1, arg2, ...)`	预先绑定参数（可选）	创建一个新的函数，永久绑定 this 值，可预先绑定部分参数