前端扫盲：手写 apply

前言

在前端开发中，apply() 方法是一个强大的工具，它允许我们以一种灵活的方式调用函数。在本篇文章中，我们将从零开始，手把手带你编写一个属于自己的apply() 方法，深入理解其内部工作原理。

apply 的用法

apply() 方法有两个主要参数：

• 第一个参数： 要调用的函数。
• 第二个参数： 一个参数数组，这些参数将传递给要调用的函数。

语法：

Function.prototype.apply(thisArg, [args])

示例：

function sum(a, b) {
  return a + b;
}

const result = sum.apply(null, [1, 2]); // 结果为 3

在这个示例中，我们调用 sum 函数并使用 apply() 方法传递参数 [1, 2]。apply() 方法将把这些参数作为单独的参数传递给 sum 函数，并返回其返回值。

运行结果

3

核心 apply

下面我们一步一步手写一个 apply() 方法：

1. 检查参数

if (typeof this !== 'function') {
  throw new TypeError('this is not a function');
}

if (!Array.isArray(args)) {
  throw new TypeError('args must be an array');
}

2. 绑定 this

const boundFunction = this.bind(thisArg);

3. 调用函数

const result = boundFunction(...args);

完整代码：

Function.prototype.myApply = function(thisArg, args) {
  if (typeof this !== 'function') {
    throw new TypeError('this is not a function');
  }

  if (!Array.isArray(args)) {
    throw new TypeError('args must be an array');
  }

  const boundFunction = this.bind(thisArg);
  const result = boundFunction(...args);
  return result;
};

运行结果

测试用例：

function sum(a, b) {
  return a + b;
}

const result = sum.myApply(null, [1, 2]); // 结果为 3

输出：

3

总结

通过手写 apply() 方法，我们不仅加深了对 apply() 方法工作原理的理解，也增强了我们的编程技能。在前端开发中，apply() 方法是一个非常有用的工具，它允许我们以灵活的方式调用函数，满足各种需求。

关键词：