揭开call、apply、bind三剑客的神秘面纱

JavaScript中的函数可以被认为是独立的代码块，它们可以接收参数并返回结果。然而，有时我们需要改变函数的执行上下文，也就是改变函数内部的this指向。这就是call、apply和bind方法的用武之地。

call

call方法允许你显式地设置函数的执行上下文。它的语法如下：

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

其中，

• function 是你要调用的函数。
• context 是你要设置的执行上下文。
• arg1, arg2, ... 是要传递给函数的参数。

举个例子，假设我们有一个函数名为greet ，它接收一个名字作为参数并返回一条问候信息：

function greet(name) {
  return "Hello, " + name + "!";
}

我们可以使用call方法来改变greet函数的执行上下文，让它在另一个对象上运行。例如，我们可以创建一个名为person 的对象，并使用call方法来让greet函数在person对象上运行：

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

greet.call(person); // "Hello, John Doe!"

在上面的例子中，我们使用了call方法来设置greet函数的执行上下文为person对象。因此，当greet函数内部的this指向person对象时，它就可以访问person对象的属性和方法。

apply

apply方法与call方法非常相似，但它的语法略有不同。apply方法的语法如下：

function.apply(context, [args])

其中，

• function 是你要调用的函数。
• context 是你要设置的执行上下文。
• [args] 是要传递给函数的参数。

唯一区别是，apply方法接受一个参数数组，而不是单个参数。

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

greet.apply(person, ["Jane Doe"]); // "Hello, Jane Doe!"

bind

bind方法与call和apply方法不同，它不会立即执行函数。相反，它返回一个新的函数，该函数的执行上下文已经绑定到指定的上下文。bind方法的语法如下：

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

其中，

• function 是你要调用的函数。
• context 是你要设置的执行上下文。
• arg1, arg2, ... 是要传递给函数的参数。

举个例子，假设我们有一个函数名为add ，它接收两个数字作为参数并返回它们的和：

function add(a, b) {
  return a + b;
}

我们可以使用bind方法来绑定add函数的执行上下文到一个名为calculator 的对象。这样，我们就可以创建一个新的函数，该函数的执行上下文已经绑定到calculator对象：

const calculator = {
  add: add.bind(null, 10)
};

calculator.add(20); // 30

在上面的例子中，我们使用了bind方法来绑定add函数的执行上下文到calculator对象。因此，当我们调用calculator.add方法时，add函数内部的this指向calculator对象，并且第一个参数已经被绑定为10。

总结

call、apply和bind都是强大的函数方法，它们允许你改变函数的执行上下文，从而实现一些非常有用的功能。

• call 方法允许你显式地设置函数的执行上下文。
• apply 方法与call方法非常相似，但它的语法略有不同。
• bind 方法与call和apply方法不同，它不会立即执行函数。

这三个方法在不同的场景下都有各自的优势。call和apply方法可以让你在运行时改变函数的执行上下文，而bind方法可以让你创建新的函数，该函数的执行上下文已经绑定到指定的上下文。