Javascript中函数绑定和闭包之间的区别?

时间:2015-07-06 11:04:39

标签: javascript function closures bind

当我们需要使用当前上下文对象调用javascript函数时,我看到有两个选项,如:

  1. 使用函数绑定
  2. 使用Javascript Closure
  3. 功能绑定示例

    auto

    JS Closure的例子

    myProject.prototype.makeAjax = function() {
      $.get('http://www.example.com/todoItems', function success(items) {
       this.addItemsToList(items)
      }.bind(this));
    }
    

    我想问:

    1. 两者中的哪一个在性能方面更好?
    2. 编写代码时应该首选哪个?

1 个答案:

答案 0 :(得分:2)

这可能取决于哪个应该是首选。我倾向于使用后者(虽然实际上我更喜欢前者,但我们使用的一些第三方库限制了这一点)。我认为选择风格的重要一点是保持一致。

prototype.bind的注意事项是IE8不支持它,以下可能会导致您遇到问题。

我认为性能明智,我希望bind稍微慢一点,因为你在那里调用了一个额外的函数,但它可能依赖于浏览器优化。我会尝试将jsperf示例放在一起,当他们的网站回来回答问题的那一部分时。

<强>更新

似乎JSPerf不会很快就会出现。这是我放在一起的一个片段,显示关闭更快(假设我做得正确)。封闭的速度略快超过7倍。如果你在打开控制台的情况下运行,你会看到时间。

var limit = 100000;

var a = {
   val: 0,
   do: function(i) { val = i; /* Actually do some work to ensure doesn't get optimised out */ }  
};

var b = {
   myFunc: function(callback) { callback(); /* Function that's going to change this keyword */}   
};



var start = +new Date();

   for(var i = 0; i < limit; i++) {
     b.myFunc(function() {
        this.do(i);
     }.bind(a));
   };

var end =  +new Date();
var diff = end - start;
console.log("bind took " + diff + " ms");

var start = +new Date();

   for(var i = 0; i < limit; i++) {
     var that = a;
     b.myFunc(function() {
        that.do(i);
     });
   };

var end =  +new Date();
var diff = end - start;

console.log("closured took " + diff + " ms");