Ausführliche Erklärung und Beispielcode zum Schließen von Javascript

Javascript-Schließung

Schließung ist ein wichtiges Konzept in Javascript, insbesondere die in der ECMA-Spezifikation gegebene Definition ist schwer zu verstehen 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 Schließungen 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 schreibe ich zuerst den einfachsten und primitivsten Abschluss, 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

zu

(5) C ausführen

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, haben Sie bereits einen Abschluss definiert!

Das ist Schluss.

2 Der Zweck 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 , dann 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();// 1
C();// 2
C();// 3

count ist eine Variable in Funktion A, und ihr Wert wird in Funktion 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 wird die Zählvariable in Funktion A immer im Speicher gespeichert.

Wenn wir einige Variablen in einem Modul definieren müssen und möchten, dass diese Variablen im Speicher bleiben, ohne globale Variablen zu „verschmutzen“, können wir Abschlüsse verwenden, um das Modul zu definieren.

3 High-End-Schreibmethoden

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 und dann Untercontainer hinzuzufügen zum Behälter, außerdem kann ein Behälter entnommen werden.

Die Funktion ist sehr einfach, aber hier geht es um 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 der Ausdruck selbst ist eine anonyme Funktion, also in Add () danach Dieser Ausdruck bedeutet, dass diese anonyme Funktion ausgeführt wird.

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 der Funktion f definiert. Ein Objekt mit einer Reihe von Methoden, die in diesem Objekt definiert sind. Durch Ausführen von window.jView = obj wird eine Variable jView im globalen Fensterobjekt definiert und diese Variable auf das obj-Objekt, dh die globale Variable jView, verwiesen bezieht sich auf obj. Und im obj-Objekt Die Funktion verweist auch auf das variable Ansichtsfenster in Funktion f, sodass das Ansichtsfenster in Funktion f nicht von GC recycelt wird und das Ansichtsfenster immer im Speicher gespeichert wird, sodass diese Schreibmethode den Abschluss erfüllt Zustand.

4 Einfache Zusammenfassung

Dies ist das einfachste Verständnis von Abschlüssen. Dies erfordert ein umfassenderes Verständnis von JS der Betriebsmechanismus des Umfangs und der Umfangskette. Aber als Anfänger müssen Sie diese zunächst nicht verstehen, sondern müssen sie in tatsächlichen Projekten verwenden. Wenn Sie sie häufiger verwenden, werden Sie natürlich ein tieferes Verständnis für Abschlüsse haben.