JavaScript-Schließung innerhalb von Schleifen – ein praktisches Beispiel
Beim Erstellen von Funktionen innerhalb von Schleifen in JavaScript ist es wichtig, sich der Möglichkeit einer Schließung bewusst zu sein Probleme, bei denen die in diesen Funktionen verwendeten Variablen fälschlicherweise an denselben Wert gebunden sein können. Dies kann zu unerwartetem Verhalten führen, insbesondere wenn es zu Verzögerungen kommt.
Problembeschreibung
Beachten Sie den folgenden Code:
<code class="js">const funcs = [];
for (var i = 0; i < 3; i++) {
funcs[i] = function() {
console.log("My value:", i);
};
}</code>Die beabsichtigte Ausgabe lautet:
<code>My value: 0 My value: 1 My value: 2</code>
Dieser Code gibt jedoch tatsächlich Folgendes aus:
<code>My value: 3 My value: 3 My value: 3</code>
Dieses Problem tritt auf, weil die Variable i innerhalb der anonymen Funktionen an dieselbe Variable außerhalb der Schleife gebunden ist . Daher verwendet jede Funktion bei der Ausführung den Endwert von i.
ES6-Lösung: let
In ECMAScript 6 (ES6) , das Schlüsselwort let ermöglicht blockbezogene Variablen. Durch die Verwendung von let innerhalb von Schleifen wird bei jeder Iteration eine neue Variable erstellt, wodurch das Abschlussproblem gelöst wird.
<code class="js">for (let i = 0; i < 3; i++) {
funcs[i] = function() {
console.log("My value: " + i);
};
}</code>ES5.1-Lösung: forEach
Für Situationen Wenn Sie hauptsächlich über ein Array iterieren, kann die Funktion Array.prototype.forEach eine saubere Lösung bieten.
<code class="js">someArray.forEach(function(arrayElement) {
// ... code for this one element
});</code>Jeder Aufruf der Rückruffunktion stellt einen eigenen Abschluss dar, wodurch sichergestellt wird, dass der übergebene Parameter spezifisch ist zu dieser Iteration.
Klassische Lösung: Abschlüsse
Eine andere Methode zur Vermeidung von Abschlussproblemen ist die Verwendung klassischer Abschlüsse, bei denen die Variable innerhalb jeder Funktion an eine separate, unveränderlicher Wert.
<code class="js">function createfunc(i) {
return function() {
console.log("My value: " + i);
};
}</code>Das obige ist der detaillierte Inhalt vonWie vermeide ich Abschlussprobleme beim Erstellen von Funktionen innerhalb von Schleifen in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
