揭秘前端百题斩【015】，快速掌握call、apply、bind

在前端百题斩【014】中，我们已经简要概述了call、apply、bind三个方法，了解到它们的作用都是相同的，均可以改变this指向，从而让某对象可以调用自身不具备的方法。在本节中，我们将深入理解这三者的实现原理，逐一探讨它们的异同点。

1. call、apply、bind的异同

• call和apply

call和apply都是立即执行的函数调用方法，也就是说，它们会立即执行被调用的函数，并将this指向设置为第一个参数。不同之处在于，call接受的参数列表与被调用的函数的参数列表一一对应，而apply接受的参数列表是一个数组，其中包含了所有要传递给被调用的函数的参数。

• bind

bind与call和apply不同，它不会立即执行被调用的函数，而是返回一个新的函数，该函数的this指向被设置为bind的第一个参数。当这个新的函数被调用时，它将使用bind的第二个参数作为参数列表来调用被调用的函数。

2. 实例代码

下面是一个简单的例子，演示了call、apply和bind的不同之处：

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

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

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

const greetJane = greet.bind(person, 'Jane Doe');
greetJane(); // Hello, Jane Doe!

在上面的示例中，我们首先定义了一个名为greet的函数，该函数接受一个name参数并打印一条问候消息。然后，我们定义了一个名为person的对象，该对象包含一个名为name的属性，其值为'John Doe'。

接下来，我们使用call和apply方法来调用greet函数，并将this指向设置为person对象。两种方法都会将'Jane Doe'作为参数传递给greet函数，因此都会打印出'Hello, Jane Doe!'。

最后，我们使用bind方法来创建一个新的函数greetJane，该函数的this指向被设置为person对象，并且第一个参数被设置为'Jane Doe'。当我们调用greetJane函数时，它将使用bind的第二个参数作为参数列表来调用greet函数，因此也会打印出'Hello, Jane Doe!'。

3. 结论

通过上面的讲解，我们已经对call、apply和bind三个方法有了深入的理解。这些方法在JavaScript中非常有用，可以帮助我们改变函数的this指向，从而实现函数的复用和解耦。