javascript - brauche Erklärung der _.bindAll()Funktion von Underscore.js





backbone.js (4)


Die einfachste Erklärung für mich ist die nächste:

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
}

Ich habe etwas backbone.js gelernt und ich habe viele Fälle gesehen, in denen _.bindAll() verwendet wurde. Ich habe die gesamte backbone.js und underscore.js Dokumentation Seite gelesen, um zu versuchen, einen Sinn dessen zu bekommen, was es tut, aber ich bin immer noch sehr unscharf, was es tut. Hier ist die Erklärung des Unterstrichs:

_.bindAll(object, [*methodNames]) 

Bindet eine Anzahl von Methoden für das Objekt, die von methodNames angegeben werden, um bei jedem Aufruf im Kontext dieses Objekts ausgeführt zu werden. Sehr praktisch für das Binden von Funktionen, die als Event-Handler verwendet werden, die ansonsten mit einem ziemlich nutzlosen Aufruf aufgerufen würden. Wenn keine methodNames angegeben sind, sind alle Funktionseigenschaften des Objekts an sie gebunden.

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

Wenn Sie hier vielleicht mit einem anderen Beispiel oder einer verbalen Erklärung helfen können, würde alles geschätzt werden. Ich habe versucht, nach weiteren Tutorials oder Beispielen zu suchen, aber ich komme nicht dazu, das zu servieren, was ich brauchte. Die meisten Leute scheinen einfach zu wissen, was es automatisch macht ...




Versuche dies

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



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>

Leider funktioniert die eigentliche "bind all" Funktionalität nur für Funktionen direkt am Objekt. Um eine Funktion aufzunehmen, die für den Prototyp definiert ist, müssen Sie diese Funktionsnamen explizit als zusätzliche Argumente an _.bindAll() .

Wie auch immer, Sie wollten eine Erklärung: Grundsätzlich erlaubt es Ihnen, eine Funktion in einem Objekt durch eine Funktion zu ersetzen, die denselben Namen und dasselbe Verhalten hat, aber auch an dieses Objekt gebunden ist, also auch ohne es als Methode zu bezeichnen ( theObject.method() ).




gibt ein Beispiel, in dem er eine zugewiesene Funktion benennt, um sieshortcut() als interne Referenz auf sich selbst verwenden zu können. John Resig gibt ein anderes Beispiel - das Kopieren einer rekursiven Funktion, die einem anderen Objekt in seinem Lernprogramm für fortgeschrittenes Javascript zugewiesen ist . Während das Zuweisen von Funktionen zu Eigenschaften nicht unbedingt die Frage ist, empfehle ich, das Lernprogramm aktiv auszuprobieren. Führen Sie den Code aus, indem Sie auf die Schaltfläche in der oberen rechten Ecke klicken, und doppelklicken Sie auf den Code, um ihn nach Belieben zu bearbeiten.

Beispiele aus dem Tutorial: rekursive Aufrufe in yell():

Tests schlagen fehl, wenn das ursprüngliche Ninja-Objekt entfernt wird. (Seite 13)

var ninja = { 
  yell: function(n){ 
    return n > 0 ? ninja.yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "A single object isn't too bad, either." ); 

var samurai = { yell: ninja.yell }; 
var ninja = null; 

try { 
  samurai.yell(4); 
} catch(e){ 
  assert( false, "Uh, this isn't good! Where'd ninja.yell go?" ); 
}

Wenn Sie die Funktion nennen, die rekursiv aufgerufen wird, werden die Tests bestanden. (Seite 14)

var ninja = { 
  yell: function yell(n){ 
    return n > 0 ? yell(n-1) + "a" : "hiy"; 
  } 
}; 
assert( ninja.yell(4) == "hiyaaaa", "Works as we would expect it to!" ); 

var samurai = { yell: ninja.yell }; 
var ninja = {}; 
assert( samurai.yell(4) == "hiyaaaa", "The method correctly calls itself." );




javascript backbone.js underscore.js