剖析JavaScript中的call()与apply()：原理、用例和实现

2024-01-17 21:37:33

在JavaScript的开发世界中，call()和apply()函数无疑是两颗璀璨的明星。它们赋予我们强大的能力，可以修改函数的执行上下文和传递参数。深入了解这些函数的原理、用例和实现，对于任何JavaScript开发人员来说都是至关重要的。

call()函数

原理：

call()函数接受三个参数：

thisArg：一个对象，指定函数执行时的this值。
arg1、arg2、... argn：零个或更多要传递给函数的参数。

调用call()时，函数将立即执行，并将this值设置为指定的thisArg。

用例：

call()函数的主要用例包括：

更改函数的执行上下文，以便以特定的对象作为this值进行调用。
将参数作为参数列表传递给函数。
柯里化函数（创建具有预定义参数的新函数）。

apply()函数

原理：

apply()函数与call()函数非常相似，但它接受两个参数：

thisArg：一个对象，指定函数执行时的this值。
argsArray：一个数组，包含要传递给函数的所有参数。

调用apply()时，函数将立即执行，并将this值设置为指定的thisArg。与call()函数不同的是，参数不是作为单独的参数传递的，而是作为数组传递的。

用例：

apply()函数的用例与call()函数的用例类似，包括：

更改函数的执行上下文，以便以特定的对象作为this值进行调用。
将参数作为数组传递给函数。
柯里化函数（创建具有预定义参数的新函数）。

call()和apply()的区别

call()和apply()函数的主要区别在于参数的传递方式：

call()函数接受参数的列表。
apply()函数接受一个包含所有参数的数组。

在大多数情况下，这两种方法都可以互换使用。但是，在某些情况下，使用一种方法比另一种方法更方便或更清晰。例如，如果您已经将参数存储在数组中，那么使用apply()函数会更方便。

实现

以下是一些call()和apply()函数的JavaScript实现：

call()函数：

Function.prototype.call = function(thisArg, ...args) {
  if (typeof this !== 'function') {
    throw new TypeError('Function.prototype.call is not callable on non-functions');
  }

  thisArg = thisArg || globalThis;
  thisArg.fn = this;
  const result = thisArg.fn(...args);
  delete thisArg.fn;
  return result;
};

apply()函数：

Function.prototype.apply = function(thisArg, argsArray) {
  if (typeof this !== 'function') {
    throw new TypeError('Function.prototype.apply is not callable on non-functions');
  }

  thisArg = thisArg || globalThis;
  thisArg.fn = this;
  const result = thisArg.fn(...argsArray);
  delete thisArg.fn;
  return result;
};