JS-bind方法的两种实现

发布于 2021-3-12 09:27
浏览
0收藏

本文实现了两个版本的bind:简单版和进阶版。第一章实现了简单版并揭示了简单版存在的问题,第二章深入研究了导致该问题的原理,以及如何解决。

 

1. 简单版


1.1 实现


简单版就不讲解了,直接看下面的代码:
(备注:简单版不支持使用new调用新创建的构造函数)

Function.prototype.myBind = function (context, ...args) {
  context = context || window;
  let invokFn = this;
  return function () {
      // 将两次传进来的参数合并
      let finalArgs = args.concat(...arguments);
      return invokFn.call(context, ...finalArgs);
  }
}

 

这样,我们就可以实现这样的效果:

 

let obj = {
  name: "xiaofei"
}
function sayName(age, sex){
  console.log(this.name, age+"岁", sex);
}
let boundSayName = sayName.myBind(obj, 18);
boundSayName("男");    // xiaofei 18岁 男

 

1.2 问题


最开始说了,这个实现不支持new调用。下面我们就来看一下如果用new调用这个绑定函数会有什么问题:

let obj = {
  name: "xiaofei"
}
function sayName(age){
  console.log(this.name);    / **(1)** /
  this.age = age;
}
let boundSayName = sayName.myBind(obj, 18);
let o = new boundSayName();    // xiaofei

这里打印的还是“xiaofei”,说明上面标注为(1)处执行时的this仍然指向obj。

下面揭示代码存在的问题:

 

问题1:

 

如果我们打印一下 obj 和 o,结果如下图:

JS-bind方法的两种实现-开源基础软件社区

可以看到,本该属于o实例对象的age属性跑到obj对象上了!其实这也很好理解,因为上面我们分析过,(1)处的代码this指向obj,那么它下一行的代码this.age = age也就相当于在给obj设置age属性。


问题2:

 

另外,我们进一步探索还可以发现一个问题:o是新绑定函数的实例,而不是旧函数的实例。

JS-bind方法的两种实现-开源基础软件社区

请读者仔细想一想,这样的结果合不合理?
合理的结果应该是:o应该同时是这两个函数的实例,即上面的两行代码都应该返回true。

针对这两个问题,我将在第2章深入分析导致该问题的原因,以及如何解决。

 

2. 升级版


2.1 问题的本质


要研究1.2中提出的问题,我们首先得深入理解new命令到底做了什么?

下面给出new命令的模拟实现代码(没接触过的读者建议研究一下,搞懂每一行代码在做什么):

function myNew(fn) {
    let objTemp = {};
    objTemp.__proto__ = fn.prototype;
    let args = [].slice.call(arguments, 1);
    let result = fn.call(objTemp, ...args);    /*(2)*/
    return (typeof result === 'object' && result != null) ? result : objTemp;
}

 

我们来分析一下new boundSayName()执行经历了什么:

 

首先,先执行new指令,当执行到(2)处代码时,用call执行boundSayName函数,这是第一次this指向发生了变化,此时this指向的是new命令底层生成的对象,也就是上面代码中的objTemp对象;

 

然后,boundSayName函数执行,也就是执行如下图所示中红框内的代码。我们看红框中的最下面那行代码,它又一次地调用了call,使得this指向了context,也就是1.2节中所示代码中的obj。

JS-bind方法的两种实现-开源基础软件社区

 

最后,调用invokFn函数,其实就是 sayName 函数(如下图所示),此时this指向为obj。这样,我们就能解释1.2中所提出的问题了。但是,该如何解决这个问题?下一节给出解决方案。JS-bind方法的两种实现-开源基础软件社区2.2 解决


先来回顾一下:

Function.prototype.myBind = function (context, ...args) {
  context = context || window;
  let invokFn = this;
  return function () {
      // 将两次传进来的参数合并
      let finalArgs = args.concat(...arguments);
      return invokFn.call(context, ...finalArgs);
  }
}

let obj = {
  name: "xiaofei"
}
function sayName(age){
  console.log(this.name);    / **(1)** /
  this.age = age;
}
let boundSayName = sayName.myBind(obj, 18);
let o = new boundSayName();    // xiaofei

console.log(o);    // {}
console.log(obj);    // {name: "xiaofei", age: 18}
o instanceof sayName; // false
o instanceof boundSayName;    // true

我们实现了一个myBind方法,但是当绑定函数被new调用时,会存在两个问题:

实例o的age属性跑到obj对象上了;
新生成的实例不是sayName的实例。


我们想实现的最终结果:

age属性在o实例上,obj对象上没有age属性;
o既是sayName的实例,也是boundSayName的实例,即:o instanceof sayName 和 o instanceof boundSayName都返回true。
 
(2.2.1) 我们先来思考第一个问题。JS-bind方法的两种实现-开源基础软件社区

思考一下上图中红框部分的this指向。可以分为两类:

 

当绑定函数直接调用时,即执行boundSayName()时,红框内代码执行时的this指向window;
当new调用时,即执行new boundSayName()时,根据2.1节的分析,此时this指向new命令底层生成的对象 objTemp。JS-bind方法的两种实现-开源基础软件社区

此外,在new命令底层操作中还有这么一步(如上图箭头所示),我们将fn的原型赋予给了objTemp的--proto--属性,也就是说:objTemp instanceof fn 应为true。而objTemp对应红框中的this;fn对应boundSayName,boundSayName对应红框中的boundFn,因此,我们可以加这么一层判断 (this instanceof boundFn)?this:context,解释如下:

  • 当boundFn的prototype出现在this对象的原型链中,说明此时是new调用的,此时call中传入this对象,也就是objTemp,也就是最终生成的实例;
  • 如果不是,说明此时是普通执行(此时this指向window,window instanceof boundFn 显然返回false),call中就传入context对象,也就是obj对象。
    代码如下:
    Function.prototype.myBind = function (context, ...args) {
      context = context || window;
      let invokFn = this;
      let boundFn = function () {
        let finalArgs = args.concat(...arguments);
         // 看这里!!就多了这里一行代码!!
        return invokFn.call((this instanceof boundFn) ? this : context, ...finalArgs);
      }
      return boundFn;
    }​

 

(2.2.2) 下面来看第二个问题:新生成的实例不是sayName的实例。

这个问题的解决思路就是:将sayName的prototype赋予给boundFn的原型的--proto--属性。这样新生成实例就会继承boundFn的原型,而这个原型的--proto--又指向sayName的原型。所以最终的效果就是:新生成的实例的原型链中既有boundFn的原型,又有sayName的原型。

 

完整代码如下:

Function.prototype.myBind = function (context, ...args) {
  context = context || window;
  let invokFn = this;
  let helperFn = function(){};    // 借助这个辅助函数将invokFn的prototype混入boundFn的原型链中.
  helperFn.prototype = invokFn.prototype;
  let boundFn = function () {
      // 将两次传进来的参数合并
      console.log(this instanceof invokFn);
      let finalArgs = args.concat(...arguments);
      return invokFn.call((this instanceof boundFn)?this:context, ...finalArgs);
  }
  boundFn.prototype = new helperFn();
  return boundFn;
}

 

标签
已于2021-3-12 09:27:59修改
收藏
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐