将 Polyfill 带入 call、apply、bind 的世界

2023-10-04 03:19:02

在 JavaScript 的世界里，函数调用是程序执行的基本单位。然而，有时我们需要对函数调用进行更细致的控制，比如改变函数的执行上下文（this 指向）或者传入不同的参数。这就是函数方法 call、apply 和 bind 大显身手的时候了。

这些方法是 JavaScript 的原生功能，但它们并不总是可用的。例如，在某些较旧的浏览器中，可能不支持这些方法。为了弥补这一不足，我们可以使用 Polyfill 技术来模拟这些方法的行为，让它们在所有浏览器中都能正常工作。

在本文中，我们将一起探究 Polyfill 如何为 call、apply 和 bind 赋能，领略 JavaScript 函数调用的奥秘。

首先，让我们从 call 方法说起。call 方法允许我们指定函数的执行上下文（this 指向），并传入参数。它的语法如下：

Function.prototype.call(context, arg1, arg2, ...)

其中，context 是要设置的执行上下文，arg1、arg2 等是传入的参数。

Polyfill 可以模拟 call 方法的行为，以便在不支持 call 方法的浏览器中也能使用它。以下是 Polyfill 的实现：

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

这个 Polyfill 的工作原理是这样的：

将参数 context 和参数列表 args 从调用 call 方法的函数中提取出来。
将 context 赋值给一个临时变量 thisValue，并将 thisValue.fn 赋值为当前函数。
使用 thisValue.fn(...args) 执行函数，并将结果存储在 result 变量中。
删除 thisValue.fn，以便在执行完函数后释放对函数的引用。
将 result 返回给调用 call 方法的函数。

接下来，让我们看看 apply 方法。apply 方法与 call 方法类似，但它允许我们传入一个数组作为参数，而不是单独的参数。它的语法如下：

Function.prototype.apply(context, argsArray)

其中，context 是要设置的执行上下文，argsArray 是一个包含参数的数组。

Polyfill 可以模拟 apply 方法的行为，以便在不支持 apply 方法的浏览器中也能使用它。以下是 Polyfill 的实现：

Function.prototype.apply = function(context, argsArray) {
  var args = argsArray || [];
  context = context || window;
  context.fn = this;
  var result = context.fn(...args);
  delete context.fn;
  return result;
};

这个 Polyfill 的工作原理与 call 方法的 Polyfill 类似，只是在处理参数时有所不同。

最后，让我们来看看 bind 方法。bind 方法允许我们创建一个新的函数，该函数的执行上下文（this 指向）被固定为指定的值。它的语法如下：

Function.prototype.bind(context, ...args)

其中，context 是要设置的执行上下文，args 是要传入的参数（可选）。

Polyfill 可以模拟 bind 方法的行为，以便在不支持 bind 方法的浏览器中也能使用它。以下是 Polyfill 的实现：

Function.prototype.bind = function(context) {
  var fn = this;
  var args = Array.prototype.slice.call(arguments, 1);
  return function() {
    var innerArgs = Array.prototype.slice.call(arguments);
    return fn.apply(context, args.concat(innerArgs));
  };
};