Wie vermeide ich Abschlussprobleme beim Erstellen von Funktionen innerhalb von Schleifen in JavaScript?

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!