手写实现 JavaScript 中的 call 和 apply 函数

2023-09-04 12:19:12

前端开发中，call() 和 apply() 方法经常被用来改变函数的执行上下文。这两个方法允许我们显式地指定函数的 this 值，并传递不同的参数给函数。

手写实现 call 和 apply 函数可以帮助我们更好地理解这两个方法的底层实现原理，并增强对 JavaScript 函数调用的理解。

1. 什么是 call 和 apply 函数？

在 JavaScript 中，函数的 this 值是函数被调用的对象。this 值决定了函数内部的 this 所引用的对象。

call() 和 apply() 方法允许我们显式地指定函数的 this 值。这两个方法的语法如下：

func.call(thisArg, arg1, arg2, ...)
func.apply(thisArg, [arg1, arg2, ...])

其中，func 是要被调用的函数，thisArg 是要指定给函数的 this 值，arg1、arg2、... 是要传递给函数的参数。

2. 如何手写实现 call 函数？

我们首先来看一下 call 函数的实现。call 函数的实现很简单，我们可以使用以下步骤来实现它：

检查函数 func 是否为函数。如果不是函数，则抛出 TypeError 异常。
获取要传递给函数的参数 args。
将 thisArg 作为函数 func 的第一个参数。
将 args 作为函数 func 的剩余参数。
调用函数 func。

以下是在 JavaScript 中的实现：

Function.prototype.call = function(thisArg) {
  if (typeof this !== "function") {
    throw new TypeError("this is not a function");
  }

  var args = Array.prototype.slice.call(arguments, 1);
  thisArg = thisArg || window;
  thisArg.fn = this;
  var result = thisArg.fn(...args);
  delete thisArg.fn;
  return result;
};

3. 如何手写实现 apply 函数？

apply 函数的实现与 call 函数类似，但有一些细微的差别。apply 函数的实现如下：

检查函数 func 是否为函数。如果不是函数，则抛出 TypeError 异常。
获取要传递给函数的参数 args。
将 thisArg 作为函数 func 的第一个参数。
将 args 作为数组传递给函数 func。
调用函数 func。

以下是在 JavaScript 中的实现：

Function.prototype.apply = function(thisArg) {
  if (typeof this !== "function") {
    throw new TypeError("this is not a function");
  }

  var args = Array.prototype.slice.call(arguments, 1);
  thisArg = thisArg || window;
  thisArg.fn = this;
  var result = thisArg.fn(...args);
  delete thisArg.fn;
  return result;
};