需要 Underscore.js 中 _.bindAll() 函数的解释

Question

我一直在学习一些backbone.js，并且见过很多使用 _.bindAll() 的实例。我已经阅读了整个backbone.js和underscore.js文档页面，试图了解它的作用，但我仍然对它的作用非常模糊。这是下划线的解释：

_.bindAll(对象, [*methodNames]) 

绑定多个方法 对象，由 methodNames 指定，以 在该对象的上下文中运行 每当它们被调用时。非常方便 用于绑定正在运行的函数 用作事件处理程序，其中 否则将被调用 这个相当没用。如果没有方法名 提供了所有对象的 函数属性将绑定到 它。

var buttonView = {
  标签：'下划线'，
  onClick : function(){ Alert('点击：' + this.label); },
  onHover : function(){ console.log('悬停: ' + this.label); }
};

_.bindAll(buttonView);

jQuery('#underscore_button').bind('click', buttonView.onClick);
=>单击按钮时， this.label 将具有正确的值...

如果您可以通过提供另一个示例或一些口头解释来提供帮助，我们将不胜感激。我尝试搜索更多教程或示例，但没有找到满足我需要的内容。大多数人似乎只知道它会自动做什么......

Answer 1

var Cow = function(name) {
    this.name = name;
}
Cow.prototype.moo = function() {
    document.getElementById('output').innerHTML += this.name + ' moos' + '<br>';
}

var cow1 = new Cow('alice');
var cow2 = new Cow('bob');

cow1.moo(); // alice moos
cow2.moo(); // bob moos

var func = cow1.moo;
func(); // not what you expect since the function is called with this===window
_.bindAll(cow1, 'moo');
func = cow1.moo;
func(); // alice moos

<div id="output" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>

不幸的是，实际的“绑定所有”功能仅适用于对象上的函数。要包含在原型上定义的函数，您需要将这些函数名称作为附加参数显式传递给 _.bindAll()。

不管怎样，你想要一个解释：基本上它允许你用一个具有相同名称和行为的函数替换一个对象上的函数，但也绑定到该对象，所以 this === theObject即使不将其作为方法调用 (theObject.method())。

Answer 2

对我来说最简单的解释如下：

initialize:function () { //backbone initialize function
    this.model.on("change",this.render); //doesn't work because of the wrong context - in such a way we are searching for a render method in the window object  
    this.model.on("change",this.render,this); //works fine
    //or 
    _.bindAll(this,'render');
    this.model.on("change",this.render); //now works fine
    //after  _.bindAll we can use short callback names in model event bindings
}

Answer 3

试试这个

<input type="button" value="submit" id="underscore_button"/>

<script>
var buttonView = {
    id     : 'underscore',
    onClick: function () {console.log('clicked: ' + this.id)},
    onHover: function () {console.log('hovering: ' + this.id)}
}
_.bindAll(buttonView, 'onClick')
$('#underscore_button').click(buttonView.onClick)
$('#underscore_button').hover(buttonView.onHover)
</script>