前端中的 call、apply 和 bind 方法：揭秘它们的用途和实现原理

2023-10-09 03:48:37

前言

在 JavaScript 中，函数调用是一种基本操作，但有时我们需要对函数的调用方式进行更细粒度的控制。这时，call、apply 和 bind 方法就派上用场了。这些方法允许我们以不同的方式调用函数，从而实现一些特殊的功能和效果，例如：

改变函数的执行上下文（this 值）
传递不同的参数给函数
将函数作为另一个函数的参数传递

call、apply 和 bind 方法的用途

call 方法

call 方法允许我们显式地设置函数的执行上下文（this 值）。语法如下：

functionName.call(thisArg, arg1, arg2, ...);

functionName：要调用的函数。
thisArg：要设置的函数的执行上下文。
arg1, arg2, ...：要传递给函数的参数。

例如，以下代码使用 call 方法将函数 sayHello 的执行上下文设置为对象 person，并传递参数 "John" 给函数：

const person = {
  name: "John",
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}!`);
  }
};

person.sayHello(); // Hello, my name is John!

apply 方法

apply 方法与 call 方法类似，但它以数组的形式传递参数给函数。语法如下：

functionName.apply(thisArg, [arg1, arg2, ...]);

functionName：要调用的函数。
thisArg：要设置的函数的执行上下文。
[arg1, arg2, ...]：要传递给函数的参数数组。

例如，以下代码使用 apply 方法将函数 sum 的执行上下文设置为对象 numbers，并传递数组 [1, 2, 3, 4, 5] 作为参数给函数：

const numbers = {
  sum: function() {
    return Array.prototype.reduce.call(arguments, (a, b) => a + b);
  }
};

const result = numbers.sum.apply(numbers, [1, 2, 3, 4, 5]);

console.log(result); // 15

bind 方法

bind 方法创建一个新的函数，该函数的执行上下文（this 值）被预先绑定为指定的值。语法如下：

functionName.bind(thisArg, arg1, arg2, ...);

functionName：要绑定的函数。
thisArg：要设置的函数的执行上下文。
arg1, arg2, ...：要预先传递给函数的参数。

例如，以下代码使用 bind 方法将函数 sayHello 的执行上下文绑定为对象 person，并预先传递参数 "John" 给函数：

const person = {
  name: "John"
};

const sayHelloBound = person.sayHello.bind(person, "John");

sayHelloBound(); // Hello, my name is John!

call、apply 和 bind 方法的异同点

相同点

call、apply 和 bind 方法都是函数调用技巧，允许我们以不同的方式调用函数。
它们都可以改变函数的执行上下文（this 值）。
它们都可以传递不同的参数给函数。

不同点

call 方法以单独的参数的形式传递参数给函数，而 apply 方法以数组的形式传递参数给函数。
bind 方法不会立即调用函数，而是创建一个新的函数，该函数的执行上下文（this 值）被预先绑定为指定的值。

如何自己实现 call、apply 和 bind 方法

我们可以自己实现 call、apply 和 bind 方法，以便更好地理解它们的原理和用法。以下是这些方法的实现示例：

call 方法的实现

Function.prototype.myCall = function(thisArg, ...args) {
  const func = this;

  thisArg = thisArg || window;
  thisArg.fn = func;

  const result = thisArg.fn(...args);

  delete thisArg.fn;

  return result;
};

apply 方法的实现

Function.prototype.myApply = function(thisArg, args) {
  const func = this;

  thisArg = thisArg || window;
  thisArg.fn = func;

  const result = thisArg.fn(...args);

  delete thisArg.fn;

  return result;
};

bind 方法的实现

Function.prototype.myBind = function(thisArg, ...args) {
  const func = this;

  const boundFunc = function(...innerArgs) {
    return func.apply(thisArg, [...args, ...innerArgs]);
  };

  boundFunc.prototype = Object.create(func.prototype);

  return boundFunc;
};