Wie löse ich Probleme mit Referenzen auf Abschlussvariablen in JavaScript-Schleifen?

JavaScript-Abschlüsse innerhalb von Schleifen: Das Problem und seine Lösungen verstehen

Das Problem tritt auf, wenn Abschlüsse innerhalb von Schleifen mit Variablendeklarationen unter Verwendung des Schlüsselworts var verwendet werden . Abschlüsse erfassen die Umgebung, in der sie definiert sind, einschließlich Variablen, und erstellen einen Verweis darauf, auch nachdem die Funktion beendet wurde. Dies kann zu unerwartetem Verhalten führen, wenn die erfasste Variable während der Ausführung der Schleife ihren Wert ändert.

Das Problem:

Bedenken Sie den folgenden Code:

<code>for (var i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

Dieser Code erstellt eine Schleife, die dreimal iteriert. Innerhalb jeder Iteration wird eine Funktion definiert und in einem Array gespeichert. Die erwartete Ausgabe wäre:

<code>My value: 0
My value: 1
My value: 2</code>

Die tatsächliche Ausgabe ist jedoch:

<code>My value: 3
My value: 3
My value: 3</code>

Dies liegt daran, dass die Variable i von den Abschlüssen erfasst wird und auf das Endergebnis aktualisiert wird Wert von 3, bevor einer der Abschlüsse ausgeführt wird.

ES6-Lösung: Verwendung des Schlüsselworts „let“

ECMAScript 6 (ES6) führt das Schlüsselwort „let“ ein, das einen Block erstellt -gültige Variablen. In unserem Beispiel können wir let anstelle von var verwenden, um für jede Iteration eine neue Variable i zu erstellen:

<code>for (let i = 0; i < 3; i++) {
  funcs[i] = function() {
    console.log("My value:", i);
  };
}</code>

Dieses Mal erfasst jeder Abschluss seine eigene eindeutige i-Variable und die erwartete Ausgabe wird erhalten .

ES5.1-Lösung: Verwendung von „forEach“

Die Array.prototype.forEach-Methode von JavaScript bietet eine saubere Möglichkeit, über ein Array zu iterieren. Jede an forEach übergebene Rückruffunktion erhält einen eindeutigen Abschluss um das aktuelle Element:

<code>var someArray = [ /* whatever */ ];
someArray.forEach(function(element) {
  // Code specific to this element
});</code>

Klassische Lösung: Verwendung von Abschlüssen

Abschlüsse können verwendet werden, um die Variable an zu binden ein bestimmter Wert außerhalb der Funktion:

<code>function createfunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

var funcs = [];
for (var i = 0; i < 3; i++) {
  funcs[i] = createfunc(i);
}</code>

Hier wird mit createfunc ein i-spezifischer Abschluss erstellt und dann im funcs-Array gespeichert. Wenn jeder dieser Abschlüsse ausgeführt wird, verweisen sie auf die entsprechende i-Variable, was zur korrekten Ausgabe führt.

Das obige ist der detaillierte Inhalt vonWie löse ich Probleme mit Referenzen auf Abschlussvariablen in JavaScript-Schleifen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!