Leicht verständlicher Beispielcode für den JavaScript-Abschluss

Schließung ist ein für JavaScript einzigartiges Konzept. Für Anfänger ist Schließung ein besonders abstraktes Konzept, insbesondere die in der ECMA-Spezifikation gegebene Definition ist schwierig Verstehe es aus der Definition. 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 Abschluss – die erste Erfahrung der Liebe

Wenn ich mit einer neuen Technologie in Berührung komme, ist das erste, was ich tue: Suche nach der Demo Code. Für Programmierer kann Code manchmal etwas besser verstehen als natürliche Sprache. Tatsächlich gibt es überall Abschlüsse. Die Hauptcodes von jQuery und zepto sind alle in einem großen Abschluss enthalten. Im Folgenden schreibe ich die einfachste und primitivste Verschlussdemo, um Ihnen beim Generieren von Abschlüssen in Ihrem Gehirn zu helfen >

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

Das ist der einfachste Abschluss der Geschichte. Einfacher geht es nicht.

Nachdem wir ein vorläufiges Verständnis erlangt haben, wollen wir kurz analysieren, wie es sich von gewöhnlichen Funktionen unterscheidet, damit wir „sie“ auf einen Blick in der „riesigen Menge“ erkennen können.

Der obige Code wird wie folgt in natürliche Sprache übersetzt:

(1) definiert eine gewöhnliche Funktion A

(2) definiert eine gewöhnliche Funktion B

< in A 🎜>(3) B in A zurückgeben (genauer gesagt einen Verweis auf B in A zurückgeben)

(4) A() ausführen und das Rückgabeergebnis von A der Variablen c zuweisen

(5) Führen Sie c() aus

Um diese 5 Operationsschritte in einem unsinnigen Satz zusammenzufassen:

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

Verarbeiten Sie diesen Unsinn noch einmal und er wird zur Definition des Abschlusses:

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

Machen Sie sich nicht die Mühe, sich diese Definition zu merken. Der Zweck dieser Definition besteht darin, Ihnen verständlich zu machen, dass die oben genannten 5 Schritte dazu dienen, die Definition des Abschlusses näher zu erläutern.

Wenn Sie also die oben genannten 5 Schritte ausführen, haben Sie bereits einen Abschluss definiert!

Das ist Schluss.

2 Die Rolle des Abschlusses

Bevor wir die Rolle des Abschlusses verstehen, wollen wir zunächst den GC-Mechanismus in Javascript verstehen: Wenn in Javascript auf ein Objekt nicht mehr verwiesen wird, wird dieses Objekt verwendet Von GC recycelt, andernfalls wird dieses 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 c indirekt auf A verweist, dh A wird von GC nicht recycelt , 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();// 1
c();// 2
c();// 3

count ist eine Variable in A und ihr Wert wird in B bei jeder Funktion geändert B ausgeführt wird, erhöht sich der Wert von count um 1 basierend auf dem ursprünglichen Wert. Daher bleibt die Zählung in A immer im Speicher.

Dies ist die Rolle des Abschlusses. Manchmal müssen wir eine solche Variable in einem Modul definieren: Wir hoffen, dass diese Variable immer im Speicher gespeichert wird, aber die globale Variable nicht „verschmutzt“. Wir können Verschlüsse verwenden, um dieses Modul zu definieren.

3 High-End-Schreibmethoden

Die obige Schreibmethode ist eigentlich die einfachste und primitivste Schreibmethode, aber in tatsächlichen Anwendungen macht sie niemand so, insbesondere in einigen großen JS-Frameworks . Schreiben. Der Grund, warum ich Ihnen diese Schreibweise erzähle, ist, dass es umso einfacher ist, sich auf eine Sache zu konzentrieren, je weniger Ablenkungen es gibt. Im Folgenden verwende ich die häufig verwendete Schreibmethode, um eine einfache Demokomponente zu schreiben:

(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 und ihn dann hinzuzufügen zum Container Untercontainer hinzufügen und einen Container entfernen. Die Funktion ist sehr einfach, aber hier geht es um ein anderes Konzept: die sofortige Ausführung der Funktion. Verstehen Sie es einfach kurz. Die Hauptsache ist zu verstehen, wie diese Schreibmethode die Abschlussfunktion implementiert.

Die obige Codestruktur kann in zwei Teile unterteilt werden: (function(){})() Der rote Teil ist ein Ausdruck, und dieser Ausdruck selbst ist eine anonyme Funktion, daher bedeutet das Hinzufügen (nach diesem Ausdruck). Ausführen dieser anonymen Funktion.

Der Ausführungsprozess dieses Codes kann also wie folgt unterteilt 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 der Schließung zu sehen ist in diesem Code, aber es gibt keinen Rückgabewert in f, und es scheint, dass er die Abschlussbedingungen nicht erfüllt:

window.jView = obj;

obj ist in f definiert. Dieses Objekt definiert eine Reihe von Methoden. Das Ausführen von window.jView = obj bedeutet, eine Variable jView im globalen Fensterobjekt zu definieren und diese Variable auf das obj-Objekt zu verweisen, das heißt, auf die globale Variable jView zu obj. Und im obj-Objekt Die Funktion verweist auch auf das variable Ansichtsfenster in f, sodass das Ansichtsfenster in f nicht von GC recycelt und im Speicher gespeichert wird, sodass diese Schreibmethode die Bedingungen des Schließens erfüllt.

4 Einfache Zusammenfassung

Dies ist das einfachste Verständnis von Abschlüssen. Natürlich müssen Abschlüsse die Ausführungsumgebung von JS (Ausführungskontext) und aktive Objekte verstehen (Aufrufobjekte) und die Betriebsmechanismen von Bereichen und Bereichsketten. 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.

Das obige ist der detaillierte Inhalt vonLeicht verständlicher Beispielcode für den JavaScript-Abschluss. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!