call、apply、bind方法学习指北：函数调用的三种姿势

作为一名合格的JavaScript程序员，掌握call、apply和bind方法的使用是必备技能之一。这些方法使您能够灵活地调用函数，并控制函数的执行上下文和参数。通过本文，您将全面了解这三个方法，并能够在实际开发中熟练运用它们。

1. call方法

call方法允许您将一个函数绑定到特定的执行上下文，并在该上下文中调用它。执行上下文是一个概念，它指定了函数执行时的环境，包括this的值和函数的作用域。call方法的语法如下：

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

• function：要调用的函数。
• context：函数调用的执行上下文，指定this关键字的值。
• arg1, arg2, ...：传递给函数的参数。

举个例子，我们有一个名为"greet"的函数，它打印一个带有名字的欢迎信息：

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

现在，我们想使用call方法来调用greet函数，并指定执行上下文为一个名为"person"的对象，该对象有一个名为"name"的属性：

const person = {
  name: "John"
};

greet.call(person, "Jane");

调用greet.call(person, "Jane")后，控制台将打印出"Hello, Jane!"，因为greet函数被绑定到了person对象，this关键字的值为person，name参数的值为"Jane"。

2. apply方法

apply方法与call方法非常相似，区别在于apply方法的参数列表是一个数组，而不是单独的参数。apply方法的语法如下：

function.apply(context, [arg1, arg2, ...])

• function：要调用的函数。
• context：函数调用的执行上下文，指定this关键字的值。

我们使用apply方法来重写上面的例子：

const person = {
  name: "John"
};

greet.apply(person, ["Jane"]);

调用greet.apply(person, ["Jane"])后，控制台同样会打印出"Hello, Jane!"。

3. bind方法

bind方法与call和apply方法不同，它不会立即调用函数，而是返回一个新的函数，该函数已经被绑定到特定的执行上下文。返回的新函数可以稍后调用，并且仍然保持绑定的执行上下文。bind方法的语法如下：

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

• function：要绑定的函数。
• context：函数绑定的执行上下文，指定this关键字的值。
• arg1, arg2, ...：传递给函数的参数，作为新函数的默认参数。

我们使用bind方法来重写上面的例子：

const person = {
  name: "John"
};

const greetJane = greet.bind(person, "Jane");

greetJane();

调用greetJane()后，控制台将打印出"Hello, Jane!"。

4. call、apply和bind方法的比较

这三个方法都有各自的优点和缺点。下表总结了它们的异同：

方法	参数	立即调用	返回值
call	单独的参数	是	无
apply	数组的参数	是	无
bind	单独的参数	否	新函数

5. 总结

call、apply和bind方法都是函数调用的基本方式，它们允许您灵活地调用函数，并控制函数的执行上下文和参数。通过本文，您已经全面了解了这三个方法，并能够在实际开发中熟练运用它们。