Schließung ist ein wichtiges Konzept in JavaScript, insbesondere die Definition in der ECMA-Spezifikation. Ohne praktische Erfahrung ist es für Sie schwierig, sie 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. Abschluss – die erste Erfahrung der Liebe
Wenn ich mit einer neuen Technologie in Berührung komme, ist das Erste, was ich tue: Suche nach dem Democode. 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 Abschlussdemo, 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!Nach dem Login kopieren
Dies ist der einfachste Abschluss in der Geschichte. Es kann nicht einfacher sein, es ist kein Abschluss mehr.
Nachdem wir ein vorläufiges Verständnis erlangt haben, wollen wir kurz analysieren, wie es sich von gewöhnlichen Funktionen unterscheidet, damit wir „sie“ in der „riesigen Menge“ auf einen Blick erkennen können.
Der obige Code wird wie folgt in natürliche Sprache übersetzt:
- (1) definiert eine gewöhnliche Funktion A
- (2) Eine gewöhnliche Funktion B ist in A definiert
- (3) B in A zurückgeben (um genau zu sein, einen Verweis auf B in A zurückgeben)
- (4) Führen Sie A() aus und weisen Sie das Rückgabeergebnis von A der Variablen c zu
- (5)Führen Sie c() aus
Um diese 5 Schritte 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 von Schließung:
Wenn eine innere Funktion von einer Variablen außerhalb ihrer äußeren Funktion referenziert wird, wird ein Abschluss gebildet.
Versuchen Sie nicht, 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, verstehen wir zunächst den GC-Mechanismus in JavaScript: Wenn in JavaScript nicht mehr auf ein Objekt verwiesen wird, wird das Objekt von GC recycelt, andernfalls wird das Objekt immer in der Speichermitte gespeichert .
Im obigen Beispiel ist B in A definiert, also hängt B von A ab, und die externe Variable c bezieht sich auf B, sodass A indirekt von c referenziert wird. Mit anderen Worten, A wird von GC nicht recycelt immer im Speicher gespeichert werden. 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
Nach dem Login kopieren
count ist eine Variable in A und ihr Wert wird in B geändert. Jedes Mal, wenn Funktion 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 möchten, dass diese Variable im Speicher bleibt, aber die globale Variable nicht „verschmutzt“. In diesem Fall können wir den Abschluss verwenden dieses Modul.
3. High-End-Schreiben
Die obige Schreibmethode ist tatsächlich die einfachste und primitivste Schreibmethode, aber in tatsächlichen Anwendungen wird sie nicht auf diese Weise verwendet, insbesondere in einigen großen JS-Frameworks. 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 häufig verwendete Schreibmethoden, um eine einfache Demo-Komponente 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);Nach dem Login kopieren
Die Funktion dieser Komponente besteht darin, einen Container zu initialisieren, dann Untercontainer zum Container hinzuzufügen oder einen Container zu 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. Das Hinzufügen von () nach diesem Ausdruck bedeutet also, dass dies anonym ausgeführt wird 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);
Nach dem Login kopieren
Nampaknya kita dapat melihat bayang penutupan dalam kod ini, tetapi tiada nilai pulangan dalam f Nampaknya ia tidak memenuhi syarat penutupan Perhatikan kod ini:
window.jView = obj;
obj ialah objek yang ditakrifkan dalam f, dan satu siri kaedah ditakrifkan dalam objek ini Melaksanakan tetingkap. pembolehubah jView rujukan obj. Fungsi dalam objek obj merujuk kepada pembolehubah viewport dalam f, jadi viewport dalam f tidak akan dikitar semula oleh GC dan akan disimpan dalam ingatan, jadi kaedah penulisan ini memenuhi syarat penutupan.
4. Ringkasan ringkas
Ini adalah pemahaman yang paling mudah tentang penutupan Sudah tentu, penutupan mempunyai pemahaman yang lebih mendalam, yang lebih terlibat Anda perlu memahami konteks pelaksanaan JS (konteks pelaksanaan), objek aktif (objek panggilan) dan Mekanisme operasi. skop dan rantai skop. Tetapi sebagai seorang pemula, anda tidak perlu memahami perkara ini buat masa ini Selepas anda mempunyai pemahaman yang mudah, anda mesti menggunakannya dalam projek sebenar Apabila anda menggunakannya lebih banyak, anda secara semula jadi akan mempunyai pemahaman yang lebih mendalam tentang penutupan.
Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.
