Erlernen Sie JS-Verschlüsse in wenigen Minuten

Schließung ist ein wichtiges Konzept in Javascript. Für Anfänger ist Schließung ein sehr abstraktes Konzept, insbesondere die Definition in der ECMA-Spezifikation. Ohne praktische Erfahrung ist es schwierig, sie anhand der Definition zu verstehen. Daher wird in diesem Artikel das Konzept des Abschlusses nicht ausführlich beschrieben, sondern direkt auf praktische Informationen eingegangen, sodass Sie den Abschluss in wenigen Minuten erlernen können!

1 Verschlüsse im Überblick

Wenn ich mit einer neuen Technologie in Berührung komme, suche ich als erstes nach dem Democode. Für uns kann das Betrachten von Code das Wesen einer Sache besser verstehen als natürliche Sprache. Tatsächlich gibt es überall Abschlüsse. Die Kerncodes von jQuery und zepto sind beispielsweise alle in einem großen Abschluss enthalten, daher werde ich zuerst den einfachsten und primitivsten Abschluss schreiben, damit Sie Abschlüsse in Ihrem Gehirn generieren können:

function A(){    function B(){
       console.log("Hello Closure!");
    }    return B;
}var C = A();
C();//Hello Closure!

Dies ist der einfachste Verschluss.

Nachdem wir ein vorläufiges Verständnis haben, analysieren wir kurz, wie es sich von gewöhnlichen Funktionen unterscheidet. Der obige Code wird wie folgt in natürliche Sprache übersetzt:

(1) Definieren Sie die gewöhnliche Funktion A

(2) Definieren Sie die gewöhnliche Funktion B

in A (3) Geben Sie B

in A zurück (4) Führen Sie A aus und weisen Sie das Rückgabeergebnis von A der Variablen C

(5) Führen Sie C aus

Um diese 5 Schritte in einem Satz zusammenzufassen:

Die interne Funktion B von Funktion A wird durch eine Variable c außerhalb von Funktion A referenziert.

Die erneute Verarbeitung dieses Satzes wird zur Definition des Abschlusses:

Wenn eine interne Funktion von einer Variablen außerhalb ihrer externen Funktion referenziert wird, wird ein Abschluss gebildet.

Wenn Sie also die oben genannten 5 Schritte ausführen, wurde ein Abschluss definiert!

Das ist Schluss.

2 Der Zweck des Verschlusses

Bevor wir die Funktion des Verschlusses verstehen, wollen wir zunächst den GC-Mechanismus in Javascript verstehen:

In Javascript Wenn auf ein Objekt nicht mehr verwiesen wird, wird das Objekt von GC recycelt, andernfalls wird das Objekt immer im Speicher gespeichert.

Im obigen Beispiel ist B in A definiert, sodass B von A abhängt und die externe Variable C auf B verweist, sodass A indirekt von C referenziert wird.

Mit anderen Worten, A wird von GC nicht recycelt und wird immer im Speicher gespeichert. Um unsere Argumentation zu beweisen, wurde das obige Beispiel leicht verbessert:

function A(){    var count = 0;    function B(){
       count ++;
       console.log(count);
    }    return B;
}var C = A();
C();// 1C();// 2C();// 3

Wenn wir einige Variablen im Modul definieren müssen und möchten, dass diese Variablen gespeichert werden ständig Wenn es sich im Speicher befindet, aber keine globalen Variablen „verschmutzt“, können Sie Abschlüsse verwenden, um dieses Modul zu definieren.

3 High-End-Schreibmethode

Die obige Schreibmethode ist eigentlich die primitivste Schreibmethode, aber in tatsächlichen Anwendungen werden Abschlüsse und anonyme Funktionen zusammen verwendet. Das Folgende ist eine häufig verwendete Methode zum Schreiben eines Abschlusses:

(function(document){    var viewport;    var obj = {
        init:function(id){
           viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
})(document);

Die Funktion dieser Komponente besteht darin, einen Container zu initialisieren. Anschließend können Sie dem Container Untercontainer hinzufügen oder einen Behälter entfernen.

Die Funktion ist sehr einfach, aber es gibt noch ein anderes Konzept: die Funktion sofort auszuführen. Ein kurzes Verständnis reicht aus. Es muss verstanden werden, wie diese Schreibmethode die Abschlussfunktion implementiert.

Der obige Code kann in zwei Teile aufgeteilt werden: (function(){}) und (), der erste () ist ein Ausdruck, und dieser Ausdruck selbst ist eine anonyme Funktion, also fügen Sie () nach diesem Ausdruck hinzu, um die Ausführung dieses anonymen Ausdrucks anzuzeigen Funktion.

Der Ausführungsprozess dieses Codes kann also wie folgt zerlegt werden:

var f = function(document){    var viewport;    var obj = {
        init:function(id){
            viewport = document.querySelector("#"+id);
        },
        addChild:function(child){
            viewport.appendChild(child);
        },
        removeChild:function(child){
            viewport.removeChild(child);
        }
    }
    window.jView = obj;
};
f(document);

Es scheint, dass der Schatten des Abschlusses in diesem Code zu sehen ist, aber es gibt ihn Nichts in f Der Rückgabewert scheint die Abschlussbedingungen nicht zu erfüllen. Beachten Sie diesen Code:

window.jView = obj;

obj ist ein in der Funktion f definiertes Objekt und eine Reihe von In diesem Objekt werden Methoden definiert. Durch Ausführen von window.jView = obj wird eine Variable jView im globalen Fensterobjekt definiert und diese Variable auf das obj-Objekt verwiesen, dh die globale Variable jView verweist auf obj und die Funktion im obj-Objekt zum variablen Ansichtsfenster in der Funktion f. Daher wird das Ansichtsfenster in der Funktion f nicht von GC recycelt und das Ansichtsfenster wird immer im Speicher gespeichert, sodass diese Schreibmethode die Bedingungen des Schließens erfüllt.

4 Einfache Zusammenfassung

Dies ist das einfachste Verständnis des Abschlusses, der viel komplizierter ist Ausführungskontext, Aktivierungsobjekt und Betriebsmechanismus des Bereichs und der Bereichskette von JS. Als Anfänger müssen Sie diese jedoch zunächst nicht verstehen. Wenn Sie sie häufiger verwenden, werden Sie natürlich ein tieferes Verständnis für Abschlüsse haben.