【手撕代码系列】JS手写实现apply方法

公众号：Code程序人生，分享前端所见所闻

在JavaScript中，apply()是Function对象的一个方法，它允许我们以指定的this值和参数列表调用函数。这个方法通常被用来在函数调用时动态地传递参数，或者在调用函数时绑定this值。
在本文中，我们将会手写实现一个apply()方法，并讲解它的实现原理。

apply()方法的基本语法

apply()方法的语法如下：

function.apply(thisArg, [argsArray])

其中：

• thisArg：调用函数时使用的this值。
• argsArray：一个数组或类数组对象，它包含传递给函数的参数。

手写apply()方法的实现

我们可以通过以下步骤来手写实现apply()方法：

1. 将调用apply()方法的函数保存在一个变量中。
2. 判断传递给apply()方法的第一个参数是否为null或undefined，如果是，则将其设置为全局对象window。
3. 将传递给apply()方法的第二个参数（如果存在）转换为一个数组args。
4. 调用函数，并将thisArg作为函数的this值，args作为函数的参数。

下面是我们的代码实现：

Function.prototype.myApply = function (ctx) {
  ctx = ctx || window;
  let fn = Symbol();
  ctx[fn] = this;
  let result;
  if (arguments[1]) {
    result = ctx[fn](...arguments[1]);
  } else {
    result = ctx[fn]();
  }
  delete ctx[fn];
  return result;
};

我们将apply()方法添加到Function原型中，这样所有的函数都可以使用它。
首先，我们先判断传递给apply()方法的第一个参数，如果不存在，就将其设置为window。然后通过声明一个Symbol类型的属性，存储调用apply()方法的函数。
然后判断，如果给apply()方法传递了第二个参数，就通过之前存储过的调用函数执行一下，将第二个参数的内容传递进去，存储结果为result。如果没有传递第二个参数，就直接执行调用函数并存储结果。
一切都结束之后，删除掉之前声明的“工具人”属性，将调用函数的结果返回。

实现示例

我们来看一个示例，展示如何使用我们手写的myApply()方法：

function greeting(name) {
  console.log("Hello " + name + "!");
}

var person = {
  name: "Alice"
};

greeting.myApply(person, ["Bob"]);

在上面的示例中，我们定义了一个greeting()函数，它接受一个参数name，并在控制台上打印一条问候语。然后，我们创建了一个名为person的对象，并将其name属性设置为"Alice"。最后，我们使用myApply()方法来调用greeting()函数，并将person对象作为this值，将数组["Bob"]作为参数。
在控制台上，我们应该会看到以下输出：

Hello Bob!

总结

在本文中，我们手写实现了apply()方法，并解释了其实现原理。通过了解这个方法的工作原理，我们可以更好地理解JavaScript中函数的调用方式。