Eine detaillierte Einführung in die Verwendung der bind()-Methode in JavaScript, um den Code sauberer zu machen

Vor ein paar Wochen habe ich darüber geschrieben, wie man die Auswirkungen des Aufrufs asynchroner Funktionen in einer Schleife abschaltet und wie man mit diesem Problem umgeht.

Bei meiner letzten Codierung habe ich einen einfacheren Weg entdeckt. Dabei werden anonyme Funktionen eliminiert und der Flusenfehler „Funktionen nicht in Schleifen schreiben“ behoben.

Sehen Sie, ich habe mit bind() in JavaScript experimentiert. Es stellt sich heraus, dass wir bind in mehreren Situationen verwenden können, einschließlich der Lösung des Abschlussproblems, das ich vor ein paar Wochen erwähnt habe.

Was ist bind()?

Die Bindungsfunktion wurde kürzlich zur JavaScript-Spezifikation hinzugefügt, sodass sie nur auf den neuesten Browsern funktioniert. Sie können die Kompatibilitätsmatrix überprüfen, um zu sehen, welche Browser bind() und andere JavaScript-Funktionen implementieren. Ich habe mir die Liste sorgfältig angesehen und festgestellt, dass keiner der Browser, die mir wichtig sind, bind() nicht unterstützt. Natürlich kann Ihre Situation anders sein.

Bind bewirkt, dass die Funktion automatisch in ihrem eigenen Abschluss gekapselt wird, sodass wir den Kontext (dieses Schlüsselwort) und eine Reihe von Parametern an die ursprüngliche Funktion binden können.

Am Ende erhalten Sie einen weiteren Funktionszeiger.

function add(a,b){
    return a + b;
}
var newFoo = add.bind(this,3,4);

Beachten Sie, dass wir dies nicht nur mit der Funktion foo() bündeln, sondern auch zwei Parameter. Wenn wir also newFoo() aufrufen, ist der Rückgabewert 7.

Aber was passiert, wenn wir die Parameter ändern, bevor wir newFoo aufrufen?

Ändern Sie den Bindungsparameter

Wenn wir eine Variable verwenden, um den Parameter an foo() zu binden, und dann die Variable ändern, bevor wir newFoo() aufrufen, was wird sich Ihrer Meinung nach der Wert ändern?

function add(a,b){
    return a + b;
}
var a = 3;
var b = 4;
var newFoo = add.bind(this,a, b);
a = 6;
b = 7;
console.log(newFoo());

Der Rückgabewert ist immer noch 7, da bind() den Wert des Parameters bindet, nicht den Wert der tatsächlichen Variablen.

Das sind gute Nachrichten, wie ich schon sagte, wir können diesen großen Vorteil in unserem Code nutzen. Am nützlichsten ist es für mich jedoch bei Rückrufen.

binden und Rückrufe

Erinnern Sie sich an diesen Artikel, dass eine unserer Lösungen für die Handhabung von Rückrufen in einer Schleife darin bestand, anonyme Funktionen um die Funktionen herum zu erstellen, die wir aufrufen wollten.

for(var i = 0;i < 10;i++){
    (function(ii){
        setTimeout(function(){
            console.log(ii);
        },1000);
    })(i);

Aber wir können bind verwenden, um den Code erheblich zu vereinfachen.

function consoleLog(i){
  console.log(i);
}
for(var i = 0;i < 10;i++){
    setTimeout(consoleLog.bind(this,i),1000);
}

Das liegt daran, dass jeder Aufruf von bind einen neuen Funktionszeiger ergibt und die ursprüngliche Funktion unverändert lässt.

Gleichzeitig haben wir auch den Linting-Fehler „Funktionen nicht in Schleifen schreiben“ entfernt, da wir die Funktion nicht in der Schleife erstellt haben, sondern nur auf die Funktion verwiesen haben, die wir außerhalb der Schleife erstellt haben.

Bindung für Event-Handler

bind()Ein weiterer Ort, an dem Sie Ihren Code sauberer gestalten können, sind Event-Handler. Jeder weiß oder sollte wissen, dass ein Event-Handler beim Aufruf auf den Kontext zugreift, in dem das Ereignis generiert wurde, und nicht auf das Objekt, in dem der Event-Handler erstellt wurde. Durch die Verwendung von bind können Sie sicher sein, dass auf die Funktion im richtigen Kontext zugegriffen wird.

function ClassName(){
   this.eventHandler = (function(){
   }).bind(this);
}

Ich sage nicht, dass Sie solchen Code schreiben sollten, das dient nur der Veranschaulichung.

Currying

Was? !

OK. Ich gebe als Erster zu, dass meine Kenntnisse in funktionaler Programmierung begrenzt sind. Die beste Definition, die ich für Currying geben kann, ist, dass es Ihnen ermöglicht, Parameter in mehreren Schritten zu übergeben.

Mit bind können wir Code wie diesen schreiben, um Currying zu implementieren:

function add(a,b,c) {
  return a+b+c;
}
var addAgain = add.bind(this, 1, 2);
var result = addAgain(3);

Das Obige ist eine detaillierte Einführung in die Verwendung der bind()-Methode in JavaScript, um den Code sauberer zu machen Verwandte Bitte beachten Sie den Inhalt der chinesischen PHP-Website (m.sbmmt.com)!