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

Posted 2023-02-22

【中文标题】需要解释 Underscore.js 中的 _.bindAll() 函数

【英文标题】：need explanation of the _.bindAll() function from Underscore.js

【发布时间】：2011-09-28 18:01:49

【问题描述】：

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

_.bindAll(object, [*methodNames]) 

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

var buttonView = 
  label   : 'underscore',
  onClick : function() alert('clicked: ' + this.label); ,
  onHover : function() console.log('hovering: ' + this.label); 
;

_.bindAll(buttonView);

jQuery('#underscore_button').bind('click', buttonView.onClick);
=> When the button is clicked, this.label will have the correct value...

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

【问题讨论】：

很好的解释：blog.bigbinary.com/2011/08/18/…

【参考方案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()）。

【讨论】：

@ThiefMaster “将这些函数名称作为附加参数显式传递给 _.bindAll()。”抱歉，仍然从您的示例中学习并尝试在这里找出其含义：所以您说原型上定义的函数不会自动与 _.bindAll 下的对象绑定，如果要实现这一点，则需要提供对象的第一个参数；第二个参数是函数名称，如果该函数是在原型上定义的？

This blog post by Yehuda Katz 很好地解释了 javascript 中的this。

【参考方案2】：

试试这个

<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>

【参考方案3】：

对我来说最简单的解释是：

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