Heim  >  Artikel  >  Web-Frontend  >  So überwinden Sie Schließungsverschmutzung in Schleifen: Ein praktischer Leitfaden

So überwinden Sie Schließungsverschmutzung in Schleifen: Ein praktischer Leitfaden

Mary-Kate Olsen
Mary-Kate OlsenOriginal
2024-10-16 17:50:02636Durchsuche

How to Overcome Closure Pollution in Loops: A Practical Guide

Abschlüsse innerhalb von Schleifen: Ein praktischer Leitfaden zum Beheben der Schließungsverschmutzung

In der Programmierung spielen Abschlüsse eine entscheidende Rolle bei der Erfassung von Variablen aus äußeren Bereichen. Wenn sie jedoch innerhalb von Schleifen verwendet werden, können sie zu unerwarteten Ergebnissen führen, die als „Closure Pollution“ bezeichnet werden. Dieser Artikel untersucht dieses Problem und bietet praktische Lösungen zu seiner Lösung.

Das Problem

Bedenken Sie den folgenden Code:

<code class="javascript">var funcs = [];

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

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

Leider gibt dieser Code Folgendes aus:

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

statt:

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

Das Problem

Das Problem entsteht, weil jede innerhalb der Schleife deklarierte Funktion dieselbe i-Variable aus dem äußeren Bereich erfasst. Wenn die Funktionen innerhalb der zweiten Schleife aufgerufen werden, verweisen sie alle auf dasselbe i, das zum Zeitpunkt ihrer Ausführung auf 3 erhöht wurde.

ES6-Lösung: let

ES6 hat das Schlüsselwort let eingeführt, das blockbezogene Variablen erstellt. Durch die Verwendung von let innerhalb der Schleife wird sichergestellt, dass jede Iteration ihre eigene i-Variable hat, wodurch das Problem der Verschlussverschmutzung gelöst wird:

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

ES5.1-Lösung: forEach

Eine andere Die Lösung für Arrays ist die Verwendung der forEach-Methode:

<code class="javascript">var someArray = [/* values */];

someArray.forEach(function(element) {
  // ...code specific to this element...
});</code>

Jede Iteration der forEach-Schleife erstellt ihren eigenen Abschluss und erfasst das für diese Iteration spezifische Array-Element.

Klassisch Lösung: Abschlüsse

Die klassische Lösung besteht darin, die Variable manuell an einen separaten, unveränderlichen Wert außerhalb der Funktion zu binden:

<code class="javascript">var funcs = [];

function createFunc(i) {
  return function() {
    console.log("My value:", i);
  };
}

for (var i = 0; i < 3; i++) {
  funcs[i] = createFunc(i);
}

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

Durch Übergabe der i-Variable als Argument an die innere Funktion Funktion erstellen wir für jede Iteration einen neuen Abschluss und stellen so sicher, dass jede Funktion auf ihren eigenen unabhängigen Wert verweist.

Das obige ist der detaillierte Inhalt vonSo überwinden Sie Schließungsverschmutzung in Schleifen: Ein praktischer Leitfaden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn