深入浅出理解call、apply和bind重写之秘

2023-10-17 00:04:35

函数重写的艺术：揭开call、apply和bind的面纱

在JavaScript的迷人世界里，函数重写是一项强大的技术，它允许我们重新定义函数的行为，从而获得更大的灵活性。其中，call、apply和bind是这方面的杰出代表，它们扮演着不可或缺的角色。

1. call的内在奥秘

_proto_的魔法：
每个函数都有一个名为_proto_的属性，它指向该函数的原型对象，而这个原型对象通常会继承自Function.prototype。当我们调用Function.prototype.call时，实际上是在通过_proto_属性查找它。

call的调用机制：
call方法接受两个参数：第一个是指定this对象的，第二个及以后的参数则会传递给函数。它将第一个参数赋给this，然后依次将其他参数传递给函数，最后执行函数。

2. 重写call的艺术

理解了call的内部机制，我们就可以对其进行重写了：

创建_proto_属性：
首先，为目标函数创建一个_proto_属性，该属性指向Function.prototype。

定义call方法：
在目标函数上定义一个call方法，该方法接受两个参数，并模仿call的执行流程。

Function.prototype.myCall = function(thisArg, ...args) {
  thisArg = thisArg || window;
  thisArg.fn = this;
  const result = thisArg.fn(...args);
  delete thisArg.fn;
  return result;
};

3. apply的独特之处

apply与call相似，但也有其独特之处：

接受数组参数：
apply的第二个参数是一个数组，其中包含要传递给函数的参数。

apply的执行流程：
apply将数组中的元素逐个传递给函数，其余过程与call基本相同。

4. bind的魅力所在

bind是函数重写的另一位重量级成员，它具有以下特点：

创建新函数：
bind创建一个新的函数，该函数的this对象被绑定到bind的第一个参数上，参数则为bind的第二个参数及以后的参数。

bind的执行流程：
当调用bind创建的新函数时，this对象被绑定到bind的第一个参数上，然后依次将bind的第二个参数及以后的参数传递给新函数，最后执行新函数。

Function.prototype.myBind = function(thisArg, ...args) {
  const fn = this;
  return function(...newArgs) {
    return fn.apply(thisArg, [...args, ...newArgs]);
  };
};