一文洞悉call、apply和bind之间的微妙差异

前端

2023-11-01 01:21:21

绪论

在JavaScript中，this代表着当前执行上下文的引用。它可以指向不同的对象，具体取决于函数的调用方式。

要改变this的指向，有三种主要方法：call(), apply()和bind()。这三种方法都允许您指定一个新对象作为函数的this值。

call()方法

call()方法是改变this指向的最简单的方法。它接受两个参数：

新的this值
参数列表

以下是call()方法的一个示例：

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

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

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

在这个示例中，我们调用了greet()函数，并将person对象作为第一个参数传递给了call()方法。这导致this关键字指向了person对象，因此当我们调用console.log()时，它将输出"Hello, John Doe!"。

apply()方法

apply()方法与call()方法非常相似，但它接受的参数列表略有不同。apply()方法接受三个参数：

新的this值
参数列表（作为数组）

以下是apply()方法的一个示例：

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

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

greet.apply(person, ['Jane Doe']); // 输出: Hello, Jane Doe!

在这个示例中，我们调用了greet()函数，并将person对象作为第一个参数传递给了apply()方法。我们将参数列表作为数组传递给了apply()方法的第二个参数。这导致this关键字指向了person对象，因此当我们调用console.log()时，它将输出"Hello, Jane Doe!"。

bind()方法

bind()方法与call()和apply()方法不同，因为它不会立即调用函数。相反，它返回一个新的函数，该函数的this值被绑定到指定的对象。

以下是bind()方法的一个示例：

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

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

const boundGreet = greet.bind(person);

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

在这个示例中，我们调用了greet()函数的bind()方法，并将person对象作为参数传递给了它。这返回了一个新的函数boundGreet()，该函数的this值被绑定到了person对象。当我们调用boundGreet()时，它将输出"Hello, John Doe!"。

比较

下表比较了call(), apply()和bind()方法：

方法	参数	立即调用	返回值
`call()`	新的`this`值，参数列表	是	`undefined`
`apply()`	新的`this`值，参数列表（作为数组）	是	`undefined`
`bind()`	新的`this`值	否	一个新的函数，其`this`值被绑定到指定的对象