Sprechen Sie über Javascript-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.
Es gibt nichts weiter als zwei Bereiche von Variablen: 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, solange f2 als Rückgabewert verwendet wird, können wir dann nicht seine internen Variablen außerhalb von f1 lesen?

　　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 der 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 einer 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.

4. 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 bemerkenswerte 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. 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()()); 

Eine weitere Sache ist, wie funktioniert das in Javascript?

var fullname = ‘John Doe'; 
var obj = { 
fullname: ‘Colin Ihrig', 
prop: { 
fullname: ‘Aurelio De Rosa', 
getFullname: function() { 
return this.fullname; 
} 
} 
};

console.log(obj.prop.getFullname());

var test = obj.prop.getFullname;

console.log(test());

Antwort
Die Antwort ist Aurelio De Rosa und John Doe. Der Grund dafür ist, dass das Verhalten einer Funktion davon abhängt, wie die JavaScript-Funktion aufgerufen und definiert wird, und nicht nur davon, wie sie definiert ist.
Beim ersten Aufruf von console.log() wird getFullname() als Funktion des obj.prop-Objekts aufgerufen. Daher bezieht sich der Kontext auf Letzteres und die Funktion gibt den vollständigen Namen des Objekts zurück. Wenn dagegen getFullname() der Testvariablen zugewiesen wird, bezieht sich der Kontext auf das globale Objekt (Fenster). Dies liegt daran, dass test implizit als Eigenschaft des globalen Objekts festgelegt wird. Aus diesem Grund gibt die Funktion den vollständigen Namen des Fensters zurück, also den in der ersten Zeile definierten Wert.

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für alle hilfreich sein, um JavaScript-Schließungen wieder zu verstehen.