15-JavaScript 中的 `call`、`apply` 和 `bind`

JavaScript 中的 `call`、`apply` 和 `bind`

笔记+分享
在 JavaScript 中，函数作为一等公民，可以像其他对象一样被操作。这种特性使得我们可以通过特定的方法来控制函数的调用环境（即 this 的值）。call、apply 和 bind 是三个常用的方法，它们都可以改变函数内部 this 的指向，但它们的用法和行为有所不同。本文将详细介绍这三者的用法及其区别。

`call` 方法

call 方法可以调用一个函数，同时指定其 this 值和参数。它的语法如下：

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

thisArg：在函数执行时，this 指向的对象。
arg1, arg2, ...：要传递给函数的参数列表。

示例

function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}const person = { name: 'Alice' };greet.call(person, 'Hello', '!'); // 输出：Hello, Alice!

在这个示例中，this 被指定为 person 对象，因此 this.name 变成了 person.name。

`apply` 方法

apply 方法与 call 方法类似，但它接受一个参数数组而不是参数列表。它的语法如下：

function.apply(thisArg, [argsArray])

thisArg：在函数执行时，this 指向的对象。
argsArray：要传递给函数的参数数组。

示例

function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}const person = { name: 'Alice' };greet.apply(person, ['Hello', '!']); // 输出：Hello, Alice!

在这个示例中，apply 方法将参数作为数组传递给函数。

`bind` 方法

bind 方法创建一个新的函数，并将 this 绑定到指定的对象。与 call 和 apply 不同，bind 并不会立即执行函数，而是返回一个新的函数。它的语法如下：

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

thisArg：在函数执行时，this 指向的对象。
arg1, arg2, ...：预设的参数列表（可选）。

示例

function greet(greeting, punctuation) {console.log(greeting + ', ' + this.name + punctuation);
}const person = { name: 'Alice' };const greetPerson = greet.bind(person, 'Hello');greetPerson('!'); // 输出：Hello, Alice!

在这个示例中，bind 方法返回一个新的函数 greetPerson，并将 this 绑定到 person 对象，同时预设了第一个参数为 'Hello'。

区别总结

调用时间：
- call 和 apply：立即调用函数。
- bind：返回一个新的函数，可以在以后调用。
参数传递：
- call：接受参数列表。
- apply：接受参数数组。
- bind：接受参数列表，并返回一个新的函数，可以在调用时再传入额外参数。
适用场景：
- call：在知道参数数量时使用。
- apply：在参数数量不确定时使用，如从数组中提取参数。
- bind：在需要返回一个带有特定 this 值的新函数时使用。

实践例子

假设我们有一个简单的例子来展示这三个方法的实际应用：

const person = {firstName: 'John',lastName: 'Doe',fullName: function() {return this.firstName + ' ' + this.lastName;}
};const anotherPerson = {firstName: 'Jane',lastName: 'Smith'
};// 使用call
console.log(person.fullName.call(anotherPerson)); // 输出：Jane Smith// 使用apply
console.log(person.fullName.apply(anotherPerson)); // 输出：Jane Smith// 使用bind
const getAnotherPersonFullName = person.fullName.bind(anotherPerson);
console.log(getAnotherPersonFullName()); // 输出：Jane Smith