Warum führen Schließungen in Schleifen dazu, dass alle Links denselben Wert anzeigen?

JavaScript-Abschlüsse in Schleifen: entmystifiziert

Abschlüsse verstehen

Abschlüsse in JavaScript ermöglichen es Funktionen, von außerhalb ihres unmittelbaren Bereichs auf Variablen zuzugreifen Umfang, Schaffung privater Datenkontexte. Variablen, auf die durch Abschlüsse verwiesen wird, bleiben jedoch auch nach Abschluss der Ausführung der einschließenden Funktion zugänglich.

Das Problem mit Abschlüssen in Schleifen

Beachten Sie den folgenden Codeausschnitt:

<code class="javascript">for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = function (num) {
    return function () {
      alert(num);
    };
  }(i);
  document.body.appendChild(link);
}</code>

In diesem Beispiel wird der Wert von i, der als num an die innere Funktion übergeben wird, vom Abschluss erfasst, wodurch eine „gemeinsam genutzte Variable“ für alle Linkelemente erstellt wird. Das bedeutet, dass beim Klicken auf einen beliebigen Link immer der letzte Wert von i angezeigt wird (in diesem Fall 4).

Verwendung eines IIFE (Immediately Invoked Function Expression) als Funktionsfabrik

Um dieses Problem zu beheben, erstellen Sie für jeden Link ein IIFE und übergeben Sie den Wert von i als Argument:

<code class="javascript">function addLinks() {
  for (var i = 0; i < 5; i++) {
    link = document.createElement("a");
    link.innerHTML = "Link " + i;

    // IIFE used as a function factory
    link.onclick = (function (num) {
      return function () {
        alert(num);
      };
    })(i);
    document.body.appendChild(link);
  }
}</code>

In dieser Version erstellt jedes IIFE einen isolierten Bereich, in dem der Wert von i eingefroren ist der Zeitpunkt der Erstellung der Funktion. Dadurch wird sichergestellt, dass jedes Linkelement seine eigene private Kopie von i hat, unabhängig von der Reihenfolge, in der darauf geklickt wird.

Alternativer Ansatz: Funktionsgenerator

Eine weitere Option ist um einen Funktionsgenerator zu verwenden, um Funktionen zu erstellen, die auf den aktuellen Wert von i verweisen:

<code class="javascript">function generateMyHandler(x) {
  return function () {
    alert(x);
  };
}

for (var i = 0; i < 5; i++) {
  link = document.createElement("a");
  link.innerHTML = "Link " + i;
  link.onclick = generateMyHandler(i);
  document.body.appendChild(link);
}</code>

In diesem Fall gibt die Funktion „generateMyHandler“ eine neue Funktion zurück, die zum Zeitpunkt von an den spezifischen Wert von i gebunden war der Funktionsaufruf.

Durch das Verständnis, wie JavaScript-Abschlüsse Variablen erfassen, und die Verwendung geeigneter Techniken zum Erstellen isolierter Bereiche können Entwickler komplexe Schleifenszenarien mit gemeinsam genutzten Variablen effektiv bewältigen.

Das obige ist der detaillierte Inhalt vonWarum führen Schließungen in Schleifen dazu, dass alle Links denselben Wert anzeigen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!