揭秘 JavaScript 领域三大妙技：call、apply 和 bind

2023-10-10 18:52:28

作为一名 JavaScript 开发人员，我们经常会遇到需要操纵函数的场景，比如改变函数的执行上下文、传递参数等等。JavaScript 中的 call、apply 和 bind 这三个妙技可以很好地满足这些需求，它们可以改变函数的执行上下文，从而实现更灵活的函数调用。

一、call 的模拟实现

为了深入了解 call 的内部原理，我们先来模拟实现一个简化版的 call 函数。

Function.prototype.myCall = function(context, ...args) {
  // 校验参数合法性
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myCall is only applicable to functions.');
  }
  if (context === null || context === undefined) {
    context = window;
  }

  // 改变函数的执行上下文
  context.fn = this;

  // 将参数列表转换为数组
  args = [...args];

  // 执行函数
  const result = context.fn(...args);

  // 删除临时属性
  delete context.fn;

  // 返回执行结果
  return result;
};

在这个模拟实现中，我们首先校验了函数和 context 的合法性，然后将函数赋给 context 的一个临时属性，再将参数列表转换为数组，最后执行函数并返回结果。

二、apply 的模拟实现

apply 函数与 call 函数非常相似，但它的参数列表传递方式有所不同。

Function.prototype.myApply = function(context, args) {
  // 校验参数合法性
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myApply is only applicable to functions.');
  }
  if (context === null || context === undefined) {
    context = window;
  }

  // 改变函数的执行上下文
  context.fn = this;

  // 将参数列表转换为数组
  args = Array.isArray(args) ? args : [...args];

  // 执行函数
  const result = context.fn(...args);

  // 删除临时属性
  delete context.fn;

  // 返回执行结果
  return result;
};

在模拟实现 apply 函数时，我们需要将参数列表转换为数组，然后才能传递给函数。

三、bind 的模拟实现

bind 函数与 call 和 apply 函数不同，它不会立即执行函数，而是返回一个新的函数，这个新函数的执行上下文被固定为 bind 时指定的 context。

Function.prototype.myBind = function(context, ...args) {
  // 校验参数合法性
  if (typeof this !== 'function') {
    throw new TypeError('Error: Function.prototype.myBind is only applicable to functions.');
  }

  // 返回一个新的函数
  return (...bindArgs) => {
    // 合并参数列表
    const allArgs = [...args, ...bindArgs];

    // 执行函数
    return this.myApply(context, allArgs);
  };
};