Beispiel für einen Javascript-Abschluss und eine Bereichskette

Question

Kann mir jemand (klar und prägnant) erklären, warum dieser Code so funktioniert?Ich habe einen stark typisierten Hintergrund in Java (6 und 7), wo es keine Abschlüsse gibt und nicht so funktionieren wie in Javascript.Ich denke, die Konzepte im Zusammenhang mit dieser Frage sind:Verschlüsse und Zielfernrohrkette.

Hier ist das Beispiel:

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = function() { console.log(i); }
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });

Das obige Beispiel protokolliert 9 (10 Mal), aber die Erwartung und meine eigene Intuition gingen davon aus, dass es 0-9 protokollieren würde.

Warum funktioniert das so wie in Javascript?Verschlüsse sind sehr mächtig, aber ich versuche, das Konzept ein für alle Mal zu begreifen!Ein leicht modifiziertes Beispiel erzeugt die richtige Ausgabe, aber warum?

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = (function(index) { console.log(index); })(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); }); 

Abschlüsse gibt es nicht nur bei Javascript, aber ich möchte sehen, warum sie im Kontext nützlich sind, wenn Javascript tatsächlich für die Schnittstelle mit dem Browser/DOM ​​geschrieben wird.

Hat jemand gute, praktische Beispiele dafür, wie wir die Schließungstechnik bei der Verbindung mit dem Browser/Dom anwenden können?

Danke.

Answer 1

In den Beispielen, die Sie haben, ist es sehr einfach.

In Ihrem ersten Beispiel gibt es nur eine Variable i und alles verweist auf diesen einen Wert.Also..es druckt die Nummer 9 zehn Mal.Jede Funktion erfasste a geteilt Wert von i das ändert sich.

Im zweiten Beispiel verwenden Sie einen Verschluss.Jede Funktion verfügt über eine private Variable namens index die empfängt – und hier ist der wichtige Teil – a Kopieren des Wertes i.

Also, du verstehst 0 durch 9 weil es zehn Funktionen gibt, jede mit einem privaten index Variable und jede davon index Variablen erhalten einen Schnappschuss von i wie es damals existierte.

Diese längere Form eines Verschlusses kann helfen:

function myFactory(index) {
  return function() {
    console.log(index);
  }
}

var myfuncs = function() {
    var funcs = []
    var i;
    for (i = 0; i < 10; i++) {
       funcs[i] = myFactory(i);
    }
    return funcs;
}

var allfuncs = myfuncs();
allfuncs.forEach(function(fn) { fn(); });