javascript - necesita explicación de la función_.bindAll() de Underscore.js

backbone.js

Question

He estado aprendiendo algunos backbone.js y he visto muchas instancias donde se usa _.bindAll() . He leído toda la página de documentación de backbone.js y underscore.js para tratar de tener una idea de lo que hace, pero todavía soy muy confuso en cuanto a lo que hace. Aquí está la explicación del subrayado:

_.bindAll(object, [*methodNames]) 

Vincula una cantidad de métodos en el objeto, especificados por methodNames, para que se ejecuten en el contexto de ese objeto siempre que se invoquen. Muy útil para funciones de enlace que se van a utilizar como controladores de eventos, que de lo contrario se invocaría con un bastante inútil. Si no se proporcionan MethodNames, todas las propiedades de función del objeto estarán vinculadas a él.

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

Si puede ayudar aquí dando otro ejemplo quizás o alguna explicación verbal, cualquier cosa sería apreciada. Intenté buscar más tutoriales o ejemplos, pero nada que sirva lo que necesitaba. La mayoría de la gente parece saber lo que hace automáticamente ...

Answer 1

La explicación más simple para mí es la siguiente:

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 2

prueba esto

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

Answer 3

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>

Desafortunadamente, la funcionalidad real de "enlazar todo" solo funciona en funciones directamente en el objeto. Para incluir una función que se define en el prototipo, debe pasar explícitamente esos nombres de función como argumentos adicionales a _.bindAll() .

De todos modos, quería una explicación: Básicamente le permite reemplazar una función en un objeto con una función que tiene el mismo nombre y comportamiento, pero también está vinculada a ese objeto, por lo que this === theObject incluso sin llamarlo como un método ( theObject.method() ).