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!
Dies ist der einfachste Abschluss in der Geschichte. Es kann nicht einfacher sein, es ist kein Abschluss mehr.
Der obige Code wird wie folgt in natürliche Sprache übersetzt:
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
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);
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.
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);
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.
