无论是call、apply或bind，它们都是函数调用的“帮手”

2023-11-01 17:57:06

前言
在JavaScript中，函数调用是程序执行的重要组成部分。函数调用时，函数体内的代码会被执行，并且可以传递参数给函数。通常情况下，函数是通过直接调用函数名来执行的，但是，在某些情况下，我们需要以不同的方式来调用函数。这时候，call、apply和bind这三个函数就派上用场了。

call、apply和bind的用法

这三个函数都允许我们以不同的方式来调用函数，但是它们的使用方法和效果略有不同。

1. call

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

语法：

function.call(thisValue, arg1, arg2, ..., argN);

参数：

thisValue： 指定函数调用时的 this 值。
arg1, arg2, ..., argN： 传递给函数的参数。

示例：

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

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

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

2. apply

apply() 方法与 call() 方法类似，但它允许我们使用数组作为参数传递给函数。

语法：

function.apply(thisValue, [arg1, arg2, ..., argN]);

参数：

thisValue： 指定函数调用时的 this 值。
[arg1, arg2, ..., argN]： 传递给函数的参数，必须是一个数组。

示例：

function sum() {
  return Array.prototype.reduce.apply(this, arguments);
}

const numbers = [1, 2, 3, 4, 5];

console.log(sum.apply(null, numbers)); // 输出：15

3. bind

bind() 方法创建一个新的函数，该函数在调用时，this 值和参数都被预先绑定好。

语法：

function.bind(thisValue, arg1, arg2, ..., argN);

参数：

thisValue： 指定函数调用时的 this 值。
arg1, arg2, ..., argN： 预先绑定的参数。

示例：

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

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

const greetJohn = greet.bind(person);

greetJohn(); // 输出：Hello, John Doe!

call、apply和bind的异同

这三个函数都允许我们以不同的方式来调用函数，但是它们也有各自的异同。

相同点：
- 这三个函数都可以指定函数调用时的 this 值。
- 这三个函数都可以传递参数给函数。
不同点：
- call() 方法使用单独给出的参数，而 apply() 方法使用数组作为参数。
- bind() 方法创建一个新的函数，该函数在调用时，this 值和参数都被预先绑定好。