Heim > Web-Frontend > js-Tutorial > Wie gehen Abschlüsse in Schleifen mit der gemeinsamen Nutzung von Variablen um und bewahren die Eindeutigkeit?

Wie gehen Abschlüsse in Schleifen mit der gemeinsamen Nutzung von Variablen um und bewahren die Eindeutigkeit?

Mary-Kate Olsen
Freigeben: 2024-10-26 21:54:29
Original
877 Leute haben es durchsucht

 How do Closures in Loops Handle Variable Sharing and Preserve Uniqueness?

Das Missverständnis über Abschlüsse in Schleifen entlarven

Im Bereich der Programmierung haben Abschlüsse aufgrund ihrer Fähigkeit, einen Verweis auf Variablen auch innerhalb des Gültigkeitsbereichs aufrechtzuerhalten, große Aufmerksamkeit erregt einer Schleife. Das Verständnis des Konzepts kann sich jedoch als entmutigend erweisen. Lassen Sie uns anhand eines vereinfachten Codebeispiels auf eine detaillierte Erklärung eingehen und Ihnen ein umfassendes Verständnis vermitteln.

Betrachten Sie den folgenden Codeausschnitt:

<code class="javascript">function addLinks() {
    for (var i = 0, link; i < 5; i++) {

        link = document.createElement("a");
        link.innerHTML = "Link " + i;


        link.onclick = function (num) {
            return function () {
                alert(num);
            };
        }(i);
        document.body.appendChild(link);

    }
}
window.onload = addLinks;</code>
Nach dem Login kopieren

Es stellt sich die Frage, wie dieser Code komprimiert werden kann unter Beibehaltung der Essenz der Verschlüsse. Um dieses Problem anzugehen, verwenden wir einen „Funktionsfabrik“-Ansatz.

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = (function (x) {
        return function () {
            alert(x);
        }
    })(i);
}</code>
Nach dem Login kopieren

Oder, für eine bessere Lesbarkeit:

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

for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick = generateMyHandler(i);
}</code>
Nach dem Login kopieren

Enthüllung der Rolle von Abschlüssen:

Ein entscheidender Aspekt, den es zu verstehen gilt, ist die Einzigartigkeit von Verschlüssen. Sie erfassen nicht nur den Wert einer Variablen, sondern umfassen auch die Variable selbst. Um dies zu veranschaulichen, betrachten Sie den folgenden Code:

<code class="javascript">var message = 'Hello!';
document.getElementById('foo').onclick = function () { alert(message) };
message = 'Goodbye!';</code>
Nach dem Login kopieren

Wenn Sie auf das Element „foo“ klicken, wird ein Warnfeld mit der Meldung „Auf Wiedersehen!“ ausgelöst. Dies liegt daran, dass Abschlüsse die Variable behalten und nicht nur ihren Wert.

Im Kontext von Schleifen führt die Verwendung eines einfachen Abschlusses zur gemeinsamen Nutzung von Variablen. Der folgende Code demonstriert dies:

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById('something' + i).onclick = function () { alert(i) };
}</code>
Nach dem Login kopieren

Wenn auf ein Element geklickt wird, wird eine Warnung mit der Nummer 10 ausgelöst, da alle Funktionen dieselbe Variable verwenden. Sogar das Ändern von i, wie mit i = "hello"; führt dazu, dass alle Elemente die gleiche Warnung anzeigen: „Hallo“. Dies liegt an der gemeinsamen Referenz auf die Variable.

Die Macht von Funktionsargumenten:

Um diese gemeinsame Nutzung von Variablen zu mildern, nutzen wir die Fähigkeiten von Funktionsargumenten in JavaScript . Wenn eine Funktion aufgerufen wird, werden Argumente als Referenz (für Objekte) oder als Wert (für Zeichenfolgen und Zahlen) übergeben. Dadurch können wir die gemeinsame Nutzung von Variablen innerhalb von Abschlüssen unterbrechen.

Im überarbeiteten Codeausschnitt:

<code class="javascript">for (var i = 0; i < 10; i++) {
    document.getElementById(i).onclick =
        (function (x) {
            return function () {
                alert(x);
            }
        })(i)
}</code>
Nach dem Login kopieren

Wir führen eine Factory-Funktion ein, um die gewünschte Funktionsreferenz zu generieren. Diese Referenz erfasst das an die Funktion übergebene Argument (in diesem Fall den Wert von i) und behält es innerhalb des Abschlusses bei, um sicherzustellen, dass jedes Element seinen eindeutigen Wert behält.

Das obige ist der detaillierte Inhalt vonWie gehen Abschlüsse in Schleifen mit der gemeinsamen Nutzung von Variablen um und bewahren die Eindeutigkeit?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
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