ITPub博客

首页 > IT职业 > IT职场 > JS函数之不要随便bind

JS函数之不要随便bind

IT职场 作者:davidtim 时间:2021-09-09 09:49:53 0 删除 编辑

JavaScript在ES5中加了个Function.prototype.bind,可以绑定当前对象,于是就不需要再放一个变量来保存this了,在需要使用this的情况下会很方便。

那么Function.prototype.bind到底是怎么实现的呢?原生的实现先不说,Polyfill是我们可以看到的(参考MDN),像这样:

if (!Function.prototype.bind) {  Function.prototype.bind = function (oThis) {    if (typeof this !== "function") {      // closest thing possible to the ECMAScript 5 internal IsCallable function
      throw new TypeError("Function.prototype.bind - what is trying to be bound is not callable");
    }    var aArgs = Array.prototype.slice.call(arguments, 1), 
        fToBind = this, 
        fNOP = function () {},
        fBound = function () {          return fToBind.apply(this instanceof fNOP && oThis
                                 ? this
                                 : oThis || window,
                               aArgs.concat(Array.prototype.slice.call(arguments)));
        };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();    return fBound;
  };
}

不难看出,我们得到的其实是一个全新的函数!原函数被封装起来了,然后在调用的时候强制为它指定this。
从结果上来看,浏览器原生的Function.prototype.bind也是如此。
CoffeeScript的fat arrow(=>)实现的绑定比这个轻量一些,但也是需要将原函数和当前对象存起来,并返回一个新的函数:

func = (a) => doSomething(a)var func = (function(_this) {  return function(a) {    return doSomething(a);
  };
})(this);

那么为什么不要滥用呢?
我测试了一下浏览器原生的Function.prototype.bind,发现使用了bind之后,函数的内存占用增加了近2倍!CoffeeScript实现的绑定稍微轻量一点,内存占用也增加了1倍多。

再顺便测试了下ES6新增的Arrow function(也是=>),因为这个特殊函数是自带绑定技能的,结果惊奇地发现,它的内存占用和普通的Function没啥区别。所以以后需要或者不需要bind的场景如果一定要滥用bind图个安心的话,可以通通上高逼格的箭头函数。:)



作者:寂寞的原子
链接:https://www.jianshu.com/p/45515682be0d


来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/3349/viewspace-2813094/ ,如需转载,请注明出处,否则将追究法律责任。

请登录后发表评论 登录
全部评论

注册时间:2012-11-06

  • 博文量
    69
  • 访问量
    20658