知悉手写Call、Apply、Bind，是2020程序员的必备技能

2023-09-02 20:30:25

Call、Apply、Bind：全面理解函数调用方式

在 JavaScript 中，Call、Apply 和 Bind 是强大的函数调用方式，可让你控制函数的上下文和参数传递。理解这些方法至关重要，可以帮助你灵活地使用函数并创建动态代码。

Call vs Apply

Call 和 Apply 都是立即调用的方法，这意味着它们在调用时立即执行函数。主要区别在于传递参数的方式：

Call 接受参数列表作为其第二个参数。
Apply 接受一个包含参数的数组作为其第二个参数。

const obj = { name: 'John' };

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

// 使用 Call 传递参数
greet.call(obj, 'Hello'); // 输出: Hello, John!

// 使用 Apply 传递参数
greet.apply(obj, ['Good morning']); // 输出: Good morning, John!

Bind

Bind 与 Call 和 Apply 不同，它不会立即调用函数。相反，它返回一个新的函数，该函数被绑定到指定的对象。这允许你稍后在不同的上下文中调用函数。

const boundGreet = greet.bind(obj);

// 稍后调用绑定的函数
boundGreet('Hey'); // 输出: Hey, John!

比较表

特性	Call	Apply	Bind
立即调用	是	是	否
参数传递	参数列表	参数数组	无
返回值	函数返回值	函数返回值	绑定函数

何时使用 Call、Apply、Bind

Call ：当你想立即调用函数并指定一个特定的调用者时，使用 Call。
Apply ：当你想立即调用函数并传入一个参数数组时，使用 Apply。
Bind ：当你想创建一个在不同上下文中调用的新函数时，使用 Bind。

代码示例

// 创建一个新的对象
const person = { name: 'Jane' };

// 定义一个函数来打招呼
function sayHello(greeting) {
  console.log(`${greeting}, ${this.name}!`);
}

// 使用 Call 绑定并调用函数
sayHello.call(person, 'Hello'); // 输出: Hello, Jane!

// 使用 Apply 绑定并调用函数
sayHello.apply(person, ['Good morning']); // 输出: Good morning, Jane!

// 使用 Bind 创建一个绑定的函数
const boundHello = sayHello.bind(person);

// 稍后调用绑定的函数
boundHello('Hey'); // 输出: Hey, Jane!