Erweiterte Closures in JavaScript erklärt

1. Das Konzept der Schließung

Schauen wir uns die Ausführung und Inspiration allgemeiner Funktionen an:

        Funktion stop() {
            varnum = 0;
            konsole.log(num);
        }
        stop(); // drucke aus, dass die Zahl 0 ist
        console.log(num); //Fehlerberichterstattungsfunktion ist nicht definiert

1. Zu diesem Zeitpunkt kann auf Variablen innerhalb der Funktion nicht von außerhalb der Funktion zugegriffen werden

2. Innerhalb einer Funktion definierte Variablen existieren nicht immer, sondern verschwinden, wenn die Funktion endet.

Das Konzept der Schließung:

1. Es ist eine Funktion, die Zugriff auf Variablen in einem anderen Bereich hat.

2. Anders ausgedrückt: Wenn die Lebensdauer einer inneren Funktion größer ist als die Deklarationslebensdauer einer äußeren Funktion und auf die innere Funktion in irgendeiner Weise vom äußeren Bereich aus zugegriffen wird, wird ein Abschluss erstellt.

Schauen wir uns den folgenden Abschlusscode und die Erklärung an:

        Funktion fn() {
            varnum = 10;
            // Funktion fun() {
            // konsole.log(num);
 
            // }
            // Spaß zurückgeben;
            Rückgabefunktion () {
                console.log(num); // 10
            }
        }
        var f = fn();
        F();

Wir können es in mehrere Teile aufteilen:

1. Die fn-Funktion hat einen internen Rückgabewert und ist eine Funktion.

2. Die Return-Funktion druckt die darin enthaltene Num-Variable. Der Grund, warum die Num-Variable gedruckt werden kann, liegt im Zugriffsmechanismus der Bereichskette. Im Folgenden werden die Wissenspunkte zu Bereich und Bereichskette ergänzt.

3. Wir akzeptieren fn () extern unter Verwendung der Variable f, d. h. wir akzeptieren den Rückgabewert von fn [interne Funktion].

4. Anschließend wird f aufgerufen, also die interne Funktion in fn. Schließlich kann es 10 drucken

Zusätzliche Wissenspunkte:

1. Geltungsbereich:

Variablen funktionieren innerhalb eines bestimmten Bereichs und haben außerhalb dieses Bereichs keine Wirkung. Dieser Bereich stellt den Umfang dar. Der Gültigkeitsbereich wird beim Definieren einer Funktion erstellt und nicht beim Aufrufen.

2. Geltungsbereichskette:

Um es in einem Satz zusammenzufassen: Gemäß [interne Funktionen können auf externe Funktionsvariablen zugreifen] wird das Näherungsprinzip angewendet, um schichtweise nach Variablen zu suchen. Dieser Mechanismus wird als Bereichskette bezeichnet.

Funktion A enthält Funktion B, dann ist Funktion B die innere Funktion von Funktion A.

Wenn eine interne Funktion eine Variable verwenden möchte, prüft sie zunächst, ob eine solche Variable in ihr selbst vorhanden ist.

Wenn nicht, wird in der nächsthöheren Ebene gesucht [Prinzip der Nähe].

Kann die Funktion Schicht für Schicht nicht gefunden werden, wird abschließend unter den globalen Variablen gesucht.

        var a = 1;
        var b = 11;
        Funktion fn1() {
            var a = 2;
            var b = "22";
            fn2();
            Funktion fn2() {
                var a = 3;
                fn3();
                Funktion fn3() {
                    var a = 4;
                    konsole.log(a); // 4
                    console.log(b); // '22'
                }
            }
        }
        fn1();

3. Speicherbereinigungsmechanismus

Sie können sich auf die Beschreibung des JS-Garbage-Collection-Mechanismus dieses großen Bruders beziehen:

//www.jb51.net/article/229425.htm

Kombinieren wir diese drei Konzepte, um die Rolle des Abschlusses zu sehen

2. Die Rolle des Abschlusses:

Wir nennen Funktion A die äußere Funktion und innerhalb dieser Funktion gibt es eine Funktion B.

Verwenden Sie eine Variable f extern, um den Rückgabewert der Funktion A [Funktion B] zu erhalten.

Die Variable im Gültigkeitsbereich der Funktion A heißt num

1. Auf Variablen innerhalb einer Funktion von außerhalb der Funktion zugreifen können [einen Kanal für den externen Zugriff auf den internen Bereich erstellen]

Prinzip : Eigentlich oben erklärt.

Zunächst müssen Sie das Prinzip der oben dargestellten Wirkungskette verstehen. Funktion B kann die Variable num von Funktion A aufrufen

Als Zweites muss verstanden werden, dass erstens der Rückgabewert von Funktion A Funktion B [interne Funktion] ist und zweitens dieser Rückgabewert von der Variable f außerhalb der Funktion empfangen werden muss. Nach dem Empfang kann Funktion B aufgerufen werden und Funktion B greift auf die Variable num von Funktion A zu. Und diese innere Funktion B ist die Abschlussfunktion.

2. Es kann den Lebenszyklus von Variablen innerhalb der Funktion verlängern.

Der erste Effekt bewirkt den zweiten Effekt. Es gibt einen Garbage Collection-Mechanismus für JS-Variablen. Wenn die Funktion ausgeführt wird, werden die Variablen gelöscht und der Speicher gelöscht. Wenn jedoch Closures verwendet werden, werden Variablen möglicherweise nicht sofort gelöscht.

Der Grund dafür ist, dass die externe Variable f eine interne Funktion B der Funktion A akzeptiert und diese interne Funktion im Gültigkeitsbereich der Funktion A auf die Variable num zugreift. Solange die Funktion B ausgeführt wird und die Variable f existiert, wird die Variable num immer existieren. Es verschwindet nicht, nur weil die Ausführung von Funktion A beendet wird.

Lesen Sie den folgenden Artikel, der sehr ausführlich und empfehlenswert ist.

JavaScript-Closures erklärt

3. Beispiel für einen Abschluss

Einige Anwendungen von Verschlüssen werden später hinzugefügt.

Wir müssen daran denken, wann wir Closures verwenden und sie nicht missbrauchen.

3.1 Klicken Sie auf li, um die Indexnummer des aktuellen li auszugeben

    <ul Klasse="Navigation">
        <li>Durian</li>
        <li>Stinkender Tofu</li>
        <li>Hering in Dosen</li>
        <li>Großer Schweinshaxenfuß</li>
    </ul>
    <Skript>
        // Closure-Anwendung – Klicken Sie auf li, um die Indexnummer des aktuellen li auszugeben // 1. Wir können die Methode zum dynamischen Hinzufügen von Attributen verwenden var lis = document.querySelector('.nav').querySelectorAll('li');
        für (var i = 0; i < lis.length; i++) {
            lis[i].onclick = Funktion () {
                console.log(i); // vier 4er
            }
        }
    </Skript>

Prinzip : Wenn die obige Abbildung so geschrieben wird, ist das gedruckte i immer 4. Der Grund dafür ist, dass es sich zu diesem Zeitpunkt zunächst im nicht strengen Modus befindet. Im nicht strengen Modus ist die For-Schleife eine synchron ausgeführte Aufgabe, während der Klick auf die Schaltfläche eine asynchrone Aufgabe ist. Nachdem die synchrone Ausführung abgeschlossen ist, wird i zu 4 addiert. Dann druckt die asynchrone Aufgabe i, was immer 4 ist.

Lösung 1: Verwenden Sie einen Abschluss

1. Die for-Schleife erzeugt vier sofort ausführbare Funktionen

2. Sofort ausführbare Funktionen sind eine Anwendung von Closures. Alle Funktionen in der Funktion zur sofortigen Ausführung, einschließlich der Funktion [Klick-Rückruf], können die von der Funktion zur sofortigen Ausführung übergebenen Parameter verwenden.

        für (var i = 0; i < lis.length; i++) {
            (Funktion (i) {
                // konsole.log(i);
                lis[i].onclick = Funktion () {
                    konsole.log(i);
 
                }
            })(ich);
        }

Änderung 2: var--->let

Klicken Sie auf das entsprechende kleine „li“ und drucken Sie „i“, die entsprechende Indexnummer. Die Verwendung von let ist ES6-Syntax und for hat einen Gültigkeitsbereich auf Blockebene.

        var lis = document.querySelector('.nav').querySelectorAll('li');
        für (lass i = 0; i < lis.length; i++) {
            lis[i].onclick = Funktion () {
                // konsole.log(i);
                konsole.log(i);
            }
        }

Methode 3: Verwenden Sie die Methode zum Festlegen des benutzerdefinierten Attributindex

        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) { // Beachten Sie, dass dies var ist, nicht let
            lis[i].index = i; // Beachten Sie, dass dies lis[i] ist, nicht this.index. Zu diesem Zeitpunkt erfolgt kein Klick, also woher kommt das?
            lis[i].onclick = Funktion () {
                konsole.log(dieser.index);
            }
        }

Zusammenfassen

Dieser Artikel endet hier. Ich hoffe, er kann Ihnen helfen. Ich hoffe auch, dass Sie mehr Inhalt auf 123WORDPRESS.COM lesen können!