Wie Variablen tut definiert mit `let` Akt in einer` for` Schleife

Question

Im documentation for the let statement in MDN, gibt es in diesem Beispiel Code:

var list = document.getElementById("list"); 

for (let i = 1; i <= 5; i++) { 
    let item = document.createElement("li"); 
    item.appendChild(document.createTextNode("Item " + i)); 

    item.onclick = function (ev) { 
    console.log("Item " + i + " is clicked."); 
    }; 
    list.appendChild(item); 
} 

Dann geben sie an:

Das obige Beispiel funktioniert wie beabsichtigt weil die fünf Instanzen der (anonyme) innere Funktion auf fünf verschiedene Instanzen der Variable i beziehen.

Ich verstehe nicht, warum es „fünf verschiedene Instanzen der Variablen i.

Die erste Anweisung in einer for Schleife immer einmal ausgeführt wird, nicht wahr? Also die let Anweisung soll nur ausführen einmal ...
Sobald der Code erreicht das Ende der Iteration es um den Zustand in der zweiten Anweisung überprüft.

Wie kommt es, je nachdem, was sie schreiben, gibt es eine neue Instanz von i bei jeder Iteration?

Answer 1

Wenn der Ausdruck let verwendet wird, erstellt jede Iteration einen neuen lexikalischen Bereich, der an den vorherigen Bereich angekettet ist.

Dies bedeutet, dass jede Schließung eine andere Instanz erfasst.

Das ist nach ECMA 6 specification aber nicht sicher, dass es in allen Browsern gleich funktioniert.

Auch nicht sicher über die Auswirkungen auf die Leistung. Ich würde diese Funktion lieber verwenden.

Answer 2

In JavaScript sind Variablen traditionell Funktionsbereich. Blöcke wie Schleifenanweisungen erstellen keinen neuen Bereich.

Wenn Sie eine Variable mit var überall in Ihrer Funktion deklarieren (zum Beispiel in einem for-Schleife), wird es nur einmal an der Spitze des Bereichs erklärt seine dank hoisting, und es wird nur eine Instanz davon im gesamten Funktionsumfang.

Es kann zu Problemen kommen, wenn Sie Callbacks innerhalb einer for ... -Schleife aufrufen.

// with hoisting, i is only declared once 
for (var i in items) { 
    // the fn is called items.length times, before any callback is invoked 
    _fetchItems(items[i], function() { 
     console.log("fetched for ", items{i]); 
     // for all callbacks, i is the same value items.length-1 
     // because they are called after the loop is complete 
    }); 
} 

Oder in Ihrem Beispiel:

// with hoisting, i is only declared once 
for (var i = 1; i <= 5; i++) { 

    // with hoisting, item is only declared once 
    var item = document.createElement("li"); 
    item.appendChild(document.createTextNode("Item " + i)); 

    // this function will be called after the for...loop is complete 
    // so i value is unique: 5 + 1 = 6 
    item.onclick = function (ev) { 
     // => always return "Item 6 is clicked" 
     console.log("Item " + i + " is clicked."); 
    }; 
    list.appendChild(item); 
} 

Auf der gegenüberliegenden, let Variablen sind nur auf den nächsten Block scoped (dh jeder Codeabschnitt zwischen geschweiften Klammern.).

In Ihrem Beispiel wird eine neue Instanz der Variablen i für jede Ausführung des Blocks innerhalb der for ... -Schleife deklariert. i geht von 1 bis 5, also gibt es 5 Ausführungen des Blocks, also 5 Instanzen der Variablen.

Sie werden jeweils den erwarteten Wert "Punkt 1 ist geklickt.", "Punkt 2 wird geklickt.", etc.