Detaillierte Erläuterung der Javascript-Schließung (Closure)_Javascript-Fähigkeiten

Das Folgende sind meine Lernnotizen, die für Javascript-Anfänger sehr nützlich sein dürften.

1. Umfang der Variablen

Um Abschlüsse zu verstehen, müssen Sie zunächst den speziellen Variablenbereich von Javascript verstehen.

Der Umfang von Variablen besteht lediglich aus zwei Typen: globale Variablen und lokale Variablen.

Das Besondere an der Javascript-Sprache ist, dass globale Variablen direkt innerhalb der Funktion gelesen werden können.

var n=999;

function f1(){
　　alert(n);
}

f1(); // 999

Andererseits können lokale Variablen innerhalb einer Funktion nicht außerhalb der Funktion gelesen werden.

function f1(){
　　var n=999;
}

alert(n); // error

Hier gibt es etwas zu beachten: Wenn Sie Variablen innerhalb einer Funktion deklarieren, müssen Sie den Befehl var verwenden. Wenn Sie es nicht verwenden, deklarieren Sie tatsächlich eine globale Variable!

function f1(){
　　n=999;
}

f1();

alert(n); // 999

2. Wie lese ich lokale Variablen von außen?

Aus verschiedenen Gründen müssen wir manchmal lokale Variablen innerhalb einer Funktion abrufen. Dies ist jedoch, wie bereits erwähnt, im Normalfall nicht möglich und kann nur durch Workarounds erreicht werden.

Das heißt, eine andere Funktion innerhalb der Funktion zu definieren.

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); // 999
　　}

}

Im obigen Code ist die Funktion f2 in der Funktion f1 enthalten. Zu diesem Zeitpunkt sind alle lokalen Variablen in f1 für f2 sichtbar. Aber das Gegenteil funktioniert nicht. Die lokalen Variablen in f2 sind für f1 unsichtbar. Dies ist die für die Javascript-Sprache einzigartige „Kettenbereichs“-Struktur. Das untergeordnete Objekt sucht Ebene für Ebene nach den Variablen aller übergeordneten Objekte. Daher sind alle Variablen des übergeordneten Objekts für das untergeordnete Objekt sichtbar, umgekehrt jedoch nicht.

Da f2 lokale Variablen in f1 lesen kann, können wir dann nicht seine internen Variablen außerhalb von f1 lesen, solange f2 als Rückgabewert verwendet wird?

function f1(){

　　var n=999;

　　function f2(){
　　　　alert(n); 
　　}

　　return f2;

}

var result=f1();

result(); // 999

3. Das Konzept der Schließung

Die f2-Funktion im Code im vorherigen Abschnitt ist ein Abschluss.

Die Definition von „Abschluss“ in diverser Fachliteratur ist sehr abstrakt und schwer verständlich. Nach meinem Verständnis ist ein Abschluss eine Funktion, die die internen Variablen anderer Funktionen lesen kann.

Da in der Javascript-Sprache nur Unterfunktionen innerhalb der Funktion lokale Variablen lesen können, können Abschlüsse einfach als „innerhalb einer Funktion definierte Funktionen“ verstanden werden.

Im Wesentlichen ist der Abschluss also eine Brücke, die das Innere der Funktion mit der Außenseite der Funktion verbindet.

Der Zweck der Schließung

Verschlüsse können an vielen Stellen eingesetzt werden. Seine größten Verwendungszwecke bestehen zum einen darin, die Variablen innerhalb der Funktion zu lesen, und zum anderen darin, die Werte dieser Variablen im Speicher zu halten.

Wie ist dieser Satz zu verstehen? Bitte schauen Sie sich den Code unten an.

  function f1(){

　　　　var n=999;

　　　　nAdd=function(){n+=1}

　　　　function f2(){
　　　　　　alert(n);
　　　　}

　　　　return f2;

　　}

　　var result=f1();

　　result(); // 999

　　nAdd();

　　result(); // 1000

In diesem Code ist das Ergebnis tatsächlich die Abschlussfunktion f2. Es wurde zweimal ausgeführt, beim ersten Mal war der Wert 999, beim zweiten Mal war der Wert 1000. Dies beweist, dass die lokale Variable n in der Funktion f1 immer im Speicher gespeichert ist und nach dem Aufruf von f1 nicht automatisch gelöscht wird.

Warum passiert das? Der Grund dafür ist, dass f1 die übergeordnete Funktion von f2 ist und f2 einer globalen Variablen zugewiesen ist, wodurch f2 immer im Speicher bleibt und die Existenz von f2 von f1 abhängt, sodass f1 immer im Speicher ist und nicht gelöscht wird Nach Abschluss des Anrufs wird es vom Garbage-Collection-Mechanismus recycelt.

Eine weitere erwähnenswerte Sache in diesem Code ist die Zeile „nAdd=function(){n =1}“. Erstens wird das Schlüsselwort var nicht vor nAdd verwendet, daher ist nAdd eine globale Variable, keine lokale Variable . variabel. Zweitens ist der Wert von nAdd eine anonyme Funktion, und die anonyme Funktion selbst ist auch ein Abschluss, sodass nAdd einem Setter entspricht, der lokale Variablen innerhalb der Funktion außerhalb der Funktion bearbeiten kann.

5. Zu beachtende Punkte bei der Verwendung von Verschlüssen

1) Da Schließungen dazu führen, dass die Variablen in der Funktion im Speicher gespeichert werden, was viel Speicher verbraucht, können Schließungen nicht missbraucht werden, da dies sonst zu Leistungsproblemen auf der Webseite führen und zu Speicherverlusten führen kann IE. Die Lösung besteht darin, alle nicht verwendeten lokalen Variablen zu löschen, bevor die Funktion beendet wird.

2) Der Abschluss ändert den Wert der Variablen innerhalb der übergeordneten Funktion außerhalb der übergeordneten Funktion. Wenn Sie daher die übergeordnete Funktion als Objekt, den Abschluss als öffentliche Methode und die internen Variablen als privaten Wert verwenden, müssen Sie darauf achten, den Wert der Variablen innerhalb der übergeordneten Funktion nicht zu ändern.

6. Fragen

Wenn Sie die Ergebnisse der folgenden beiden Codeteile verstehen können, sollten Sie den Funktionsmechanismus von Schließungen verstehen.

Codeausschnitt 1

  var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　return function(){
　　　　　　　　return this.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());

Codeausschnitt 2

  var name = "The Window";

　　var object = {
　　　　name : "My Object",

　　　　getNameFunc : function(){
　　　　　　var that = this;
　　　　　　return function(){
　　　　　　　　return that.name;
　　　　　　};

　　　　}

　　};

　　alert(object.getNameFunc()());　  

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.