深入浅出，拨云见日：JavaScript 中 call、apply 和 bind 的用法全解析

2024-02-03 12:36:08

call 和 apply：传递参数的两种方式

call 和 apply 方法都允许我们显式地指定函数的执行上下文（this 指向），并传递参数给函数。它们之间的主要区别在于参数传递的方式不同：

call 方法接受一个参数列表，该列表中的第一个参数是函数的执行上下文（this 指向），其余参数是传递给函数的实际参数。
apply 方法也接受两个参数，第一个参数是函数的执行上下文（this 指向），第二个参数是一个数组，其中包含了传递给函数的实际参数。

以下是一个使用 call 方法的示例：

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

const person = {
  name: 'John Doe'
};

greet.call(person, 'Hello'); // 输出: Hello, John Doe

在这个示例中，我们使用 call 方法来调用 greet 函数，并将 person 对象作为函数的执行上下文（this 指向）。我们还传递了一个参数 'Hello' 给 greet 函数。当 greet 函数被调用时，this 指向 person 对象，因此我们可以访问 person 对象的属性 name。

以下是一个使用 apply 方法的示例：

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

const person = {
  name: 'John Doe'
};

const args = ['Hello'];

greet.apply(person, args); // 输出: Hello, John Doe

在这个示例中，我们使用 apply 方法来调用 greet 函数，并将 person 对象作为函数的执行上下文（this 指向）。我们还将一个数组 args 作为第二个参数传递给 apply 方法，其中包含了要传递给 greet 函数的实际参数。当 greet 函数被调用时，this 指向 person 对象，因此我们可以访问 person 对象的属性 name。

bind：创建新函数

bind 方法与 call 和 apply 方法不同，它不会立即调用函数，而是返回一个新的函数，该函数的执行上下文（this 指向）已经被绑定到了指定的值。

以下是一个使用 bind 方法的示例：

function greet(greeting) {
  console.log(greeting + ', ' + this.name);
}

const person = {
  name: 'John Doe'
};

const boundGreet = greet.bind(person);

boundGreet('Hello'); // 输出: Hello, John Doe