【build your own xxx】实现你自己的bind函数-阿里云开发者社区

【build your own xxx】实现你自己的bind函数

2022-09-23 104

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 【build your own xxx】实现你自己的bind函数

今天来实现JavaScript的bind函数。首先看MDN的bind函数描述：

从上面可以看出来，var A = B.bind(this)函数其实干了这几件事情：

返回一个函数，且这个函数后面运行时的this就是bind(this)传入的this
接收参数，这些参数（如果有的话）作为bind()的第二个参数跟在this（或其他对象）后面，之后它们会被插入到目标函数的参数列表的开始位置，传递给绑定函数的参数会跟在它们的后面
使用new操作bind函数返回的函数时，之前传入的this会被忽略，也就是说new的优先级高于bind

第一步

首先实现第一步：

Function.prototype.Zbind = function (othis) {
        var originFunc = this;
    return function () {
      originFunc.apply(othis);
    }
  }
  var obj = {
  }
  function createAgumon() {
    this.name = "agumon";
    }
  var createAgumonBind = createAgumon.Zbind(obj);
  createAgumonBind();   
    obj;// {name: "agumon"}
复制代码

第二步

第二步考虑传参的问题，首先看看原生的bind函数是如何传参的：

var obj = {
    }
    function createAgumon(gender, age) {
        this.name = "agumon";
    this.gender = gender;
    this.age = age;
    }
    var createAgumonBind = createAgumon.bind(obj, 'female');
  createAgumonBind(22);
复制代码

可以看出来在bind函数中能先传部分参数，运行bind返回的函数时可以再传入部分参数。自己实现：

Function.prototype.Zbind = function (othis) {
        var originFunc = this;
    var partArgs = [].slice.call(arguments, 1);
      var func = function() {};
    var boundFunc = function () {
      var finalArgs = partArgs.concat([].slice.call(arguments));
      return originFunc.apply(othis, finalArgs);
        }
        return boundFunc;
    }
    var obj = {
    }
    function createAgumon(gender, age) {
    this.name = "agumon";
    this.gender = gender;
    this.age = age;
    }
  var createAgumonBind = createAgumon.Zbind(obj, 'female');
  createAgumonBind(22);
    obj;// {name: "agumon", gender: "female", age: 22}
复制代码

第三步

使用new来调用bind返回的函数时，会忽略bind传入的thisnew操作和普通的函数调用有哪些区别？粗略的来讲，例如new F()这样的调用，有以下几个步骤：

1. 新建一个对象，var o = new Object()

1. 设置原型链，o.proto = F.prototype

1. 把F函数体内的this绑定为o，并且执行F函数的代码

1. 判断F的返回类型：如果是值类型，则返回o 如果是引用类型，则返回该引用类型对象

开始实现：

Function.prototype.Zbind = function (othis) {
        var originFunc = this;
    var partArgs = [].slice.call(arguments, 1);
    var func = function() {};
    var boundFunc = function () {
      var finalArgs = partArgs.concat([].slice.call(arguments));
            return originFunc.apply(this instanceof boundFunc ? this : othis, finalArgs);
        }
      return boundFunc;
    }
    var obj = {}
    function createAgumon(gender, age) {
      this.name = "agumon";
      this.gender = gender;
      this.age = age;
  }
    var createAgumonBind = createAgumon.Zbind(obj, 'female');
    var newObj = new createAgumonBind(22);
    obj // {}
    newObj // {name: "agumon", gender: "female", age: 22}
复制代码

关键的地方在于这里：this instanceof boundFunc ? this : othis，如果是new操作的话，此时this的__proto__已经指向了boundFunc，所以使用instanceof可以检测出是否在使用new操作

小细节

原型丢失

刚刚实现的Zbind方法有个小问题：

Function.prototype.Zbind = function (othis) {
        var originFunc = this;
        var partArgs = [].slice.call(arguments, 1);
        var func = function() {};
        var boundFunc = function () {
          var finalArgs = partArgs.concat([].slice.call(arguments));
          return originFunc.apply(this instanceof boundFunc ? this : othis, finalArgs);
        }
        return boundFunc;
      }
      var obj = {
      }
      function createAgumon(gender, age) {
        this.name = "agumon";
        this.gender = gender;
        this.age = age;
      }
      createAgumon.prototype.college = 'THU'
      var createAgumonBind = createAgumon.Zbind(obj, 'female');
      var newObj = new createAgumonBind(22);
      console.log(newObj.college)// undefined
复制代码

可以看出来原型链丢失了，newObj.college得是'THU'才行

修改：

Function.prototype.Zbind = function (othis) {
        var originFunc = this;
        var partArgs = [].slice.call(arguments, 1);
        var func = function() {};
        var boundFunc = function () {
          var finalArgs = partArgs.concat([].slice.call(arguments));
          return originFunc.apply(this instanceof boundFunc ? this : othis, finalArgs);
        }
        func.prototype = originFunc.prototype;
        boundFunc.prototype = new func();
        return boundFunc;
      }
      var obj = {
      }
      function createAgumon(gender, age) {
        this.name = "agumon";
        this.gender = gender;
        this.age = age;
      }
      createAgumon.prototype.college = 'THU'
      var createAgumonBind = createAgumon.Zbind(obj, 'female');
      var newObj = new createAgumonBind(22);
      console.log(newObj.college)// 'THU'
复制代码

为什么要使用func.prototype = originFunc.prototype;boundFunc.prototype = new func();，而不是直接用**boundFunc.prototype = originFunc.prototype;**是因为这样写的话，修改boundFunc.prototype会影响到原函数的prototype。

that'all

参考资料：

mdn-bind

javascript中，new操作符的工作原理是什么?

【build your own xxx】实现你自己的bind函数

第一步

第二步

第三步

小细节

原型丢失

热门文章

最新文章

相关电子书

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

【build your own xxx】实现你自己的bind函数

第一步

第二步

第三步

小细节

原型丢失

热门文章

最新文章

相关电子书