Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Mary-Kate Olsen
Freigeben: 2024-10-16 17:50:02
Original
549 Leute haben es durchsucht

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>
Nach dem Login kopieren

Leider gibt dieser Code Folgendes aus:

<code>My value: 3
My value: 3
My value: 3</code>
Nach dem Login kopieren

statt:

<code>My value: 0
My value: 1
My value: 2</code>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Quelle:php
Erklärung dieser Website
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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!