JS 实现 call、apply、bind，掌握 Javascript 的精髓

前言

在 JavaScript 中，函数是一个非常重要的概念。它允许我们封装代码，以便在需要时重复使用。而 call、apply 和 bind 是三个非常有用的函数方法，它们可以改变函数的执行上下文。本文将一一介绍这三个方法。

call

call() 方法接受两个参数：第一个参数是要调用的函数，第二个参数是要作为函数的 this 值的对象。call() 方法将把函数的 this 值设置为第二个参数，然后执行该函数。

举个例子，我们有一个名为 greet() 的函数，它接受一个参数 name，并打印出 Hello, name!。

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

我们可以使用 call() 方法来调用 greet() 函数，并将 this 值设置为一个对象。

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

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

在上面的例子中，我们将 person 对象作为 greet() 函数的 this 值。这意味着当 greet() 函数被调用时，this 将指向 person 对象。因此，console.log() 语句将打印出 Hello, Jane Doe!。

apply

apply() 方法与 call() 方法非常相似，但它接受一个数组作为第二个参数，而不是一个对象。该数组包含要作为函数参数传递的值。

const args = ['Jane Doe'];

greet.apply(person, args); // Hello, Jane Doe!

在上面的例子中，我们将 args 数组作为 greet() 函数的第二个参数。这意味着当 greet() 函数被调用时，它的参数将是 ['Jane Doe']。因此，console.log() 语句将打印出 Hello, Jane Doe!。

bind

bind() 方法与 call() 和 apply() 方法不同，它不会立即调用函数。相反，它返回一个新的函数，该函数的 this 值被绑定到第一个参数。

const boundGreet = greet.bind(person);

boundGreet('Jane Doe'); // Hello, Jane Doe!

在上面的例子中，我们将 person 对象作为 greet() 函数的第一个参数。这意味着当 boundGreet() 函数被调用时，它的 this 值将被设置为 person 对象。因此，console.log() 语句将打印出 Hello, Jane Doe!。

总结

call()、apply() 和 bind() 方法是 JavaScript 中非常有用的函数方法，它们可以改变函数的执行上下文。我们可以使用这些方法来创建更灵活、更可重用的代码。