Was sind JavaScript-Schließungen und wie schreibt man sie?

JavaScript ist eine der am schwierigsten zu beherrschenden Programmiersprachen. Manchmal sind selbst erfahrene Entwickler nicht in der Lage, die Ausgabe des von ihnen geschriebenen Codes vorherzusagen. Eines der verwirrenderen Konzepte in JavaScript sind Closures. Anfänger stolpern normalerweise über das Konzept – keine Sorge. Dieser Artikel führt Sie langsam durch die grundlegenden Beispiele, damit Sie Verschlüsse besser verstehen. Lass uns anfangen.

Was sind Verschlüsse?

Eine Closure ist eine Struktur einer Funktion und ihrer lexikalischen Umgebung, einschließlich aller Variablen im Gültigkeitsbereich der Funktion bei der Closure-Erstellung. Betrachten Sie einfacher ausgedrückt eine äußere Funktion und eine innere Funktion. Die innere Funktion hat Zugriff auf den Geltungsbereich der äußeren Funktion.

Bevor Sie sich einige Beispiele für JavaScript-Verschlüsse ansehen, müssen Sie den lexikalischen Bereich verstehen.

Was ist eine lexikalische Umgebung?

Die lexikalische Umgebung ist der lokale Speicher zusammen mit seiner Elternumgebung. Sehen Sie sich das folgende Beispiel an und erraten Sie die Ausgabe des folgenden Codes:

Funktion äußere (){ 
 sei a = 10;
 Konsole.log (y);
 innere();
 Funktion inner(){
 Konsole.log (a);
 Konsole.log (y);
 }
}
sei y = 9;
äußere();

Die Ausgabe wird sein 9, 10, 9. Die innere Funktion hat Zugriff auf die Variablen ihres Elternteils, der äußere() Funktion. Daher die innere() Funktion kann zugreifen variabel a. Der innere() Funktion kann auch zugreifen variabel y wegen des Konzepts der Umfangskette.

Der Elternteil der äußeren Funktion ist global, und der Elternteil der innere() Funktion ist die äußere() Funktion. Daher die innere() Funktion hat Zugriff auf die Variablen ihrer Eltern. Wenn Sie versuchen, auf die Variable zuzugreifen ein im globalen Bereich wird ein Fehler angezeigt. Daher kann man sagen, dass die innere() Funktion ist lexikalisch innerhalb der äußere() -Funktion und der lexikalische Elternteil der äußere() Funktion ist global.

JavaScript-Schließungsbeispiele erklärt

Da Sie sich mit der lexikalischen Umgebung vertraut gemacht haben, können Sie die Ausgabe des folgenden Codes leicht erraten:

Funktion a(){
 sei x = 10;
 Funktion b(){
 Konsole.log (x);
 }
 B();
}
ein();

Die Ausgabe ist 10. Auch wenn Sie es auf den ersten Blick vielleicht nicht erraten, ist dies ein Beispiel für den Abschluss in JavaScript. Closures sind nichts anderes als eine Funktion und ihre lexikalische Umgebung.

Betrachten wir ein Beispiel, bei dem drei Funktionen ineinander verschachtelt sind:

Funktion a(){ 
 sei x = 10;
 Funktion b(){ 
 Funktion c(){
 Funktion d(){
 Konsole.log (x);
 }
 D();
 }
 C();
 }
 B();
}
ein();

Wird es trotzdem Schließung heißen? Die Antwort ist ja. Auch hier ist eine Closure eine Funktion mit ihrem lexikalischen Elternteil. Der lexikalische Elternteil der Funktion D() ist C(), und aufgrund des Konzepts der Scope Chain, Funktion D() hat Zugriff auf alle Variablen der äußeren Funktionen und der globalen.

Schauen Sie sich ein weiteres interessantes Beispiel an:

Funktion x(){
 sei a = 9;
 Rückgabefunktion y(){
 Konsole.log (a); 
 }
}
sei b = x();

Sie können eine Funktion innerhalb einer Funktion zurückgeben, einer Variablen eine Funktion zuweisen und eine Funktion innerhalb von a. übergeben Funktion in JavaScript. Das ist die Schönheit der Sprache. Können Sie erraten, wie die Ausgabe aussehen wird, wenn Sie eine Variable drucken? B? Es wird Druckfunktion j(). Die Funktion x() gibt eine Funktion zurück j(). Daher ist die Variable B speichert eine Funktion. Können Sie sich jetzt vorstellen, was passiert, wenn Sie Variable aufrufen? B? Es druckt den Wert der Variablen ein: 9.

Sie können das Verbergen von Daten auch mithilfe von Verschlüssen erreichen. Betrachten Sie zum besseren Verständnis ein Beispiel mit einer Schaltfläche mit einer ID namens "Schaltfläche" im Browser. Fügen wir ihm einen Click-Ereignis-Listener hinzu.

Jetzt müssen Sie berechnen, wie oft auf die Schaltfläche geklickt wird. Dazu gibt es zwei Möglichkeiten.

1. Erstellen Sie eine globale Variablenanzahl und erhöhen Sie diese bei einem Klick. Aber diese Methode hat einen Fehler. Es ist einfach, Änderungen an den globalen Variablen vorzunehmen, da sie leicht zugänglich sind.

   Klick mich
   
   

2. Wir können das Verbergen von Daten durch die Verwendung von Verschlüssen erreichen. Sie können das ganze einwickeln addEventListener() Funktion innerhalb einer Funktion. Es macht einen Verschluss. Und nachdem Sie einen Abschluss erstellt haben, können Sie einen erstellen Zählvariable und erhöhen Sie seinen Wert onclick. Bei dieser Methode bleibt die Variable im Funktionsumfang, und es können keine Änderungen vorgenommen werden.

   Klick mich
   
   

Verwandt: Der versteckte Held der Websites: Das DOM verstehen

Warum sind Schließungen wichtig?

Closures sind nicht nur bei JavaScript, sondern auch in anderen Programmiersprachen sehr wichtig. Sie sind in vielen Szenarien nützlich, in denen Sie unter anderem Variablen in ihrem privaten Bereich erstellen oder Funktionen kombinieren können.

Betrachten Sie dieses Beispiel für die Funktionszusammensetzung:

const multiplizieren = (a, b) => a*b;
const multiplyBy2 = x => multiplizieren (10, x);
console.log (multiplyBy2(9));

Wir können das gleiche Beispiel mit Closures implementieren:

const multiplizieren = Funktion (a){
 Rückgabefunktion (b) {
 zurück a*b
 }
}
const multiplyBy2 = multiplizieren (2);
console.log (multiplyBy2(10))

Funktionen können Schließungen in den folgenden Szenarien verwenden:

1. Um die Funktion Currying zu implementieren
2. Zum Verbergen von Daten verwendet werden
3. Zur Verwendung mit Ereignis-Listenern
4. Zur Verwendung in der setTimeout-Methode()

Sie sollten Verschlüsse nicht unnötig verwenden

Es wird empfohlen, Schließungen zu vermeiden, es sei denn, sie werden wirklich benötigt, da sie die Leistung Ihrer App beeinträchtigen können. Die Verwendung von Closures kostet viel Speicher, und wenn die Closures nicht richtig gehandhabt werden, kann dies zu Speicherlecks.

Geschlossene Variablen werden vom Garbage Collector von JavaScript nicht freigegeben. Wenn Sie Variablen innerhalb von Closures verwenden, wird der Speicher vom Garbage Collector nicht freigegeben, da der Browser das Gefühl hat, dass die Variablen noch verwendet werden. Daher verbrauchen diese Variablen Speicher und verringern die Leistung der App.

Hier ist ein Beispiel, das zeigt, wie Variablen innerhalb von Closures nicht Garbage Collection werden.

 Funktion f(){
 const x = 3;
 Rückgabefunktion inner(){
 Konsole.log (x);
 }
 }
 F()();

Der variabel x Hier wird Speicher verbraucht, obwohl er nicht häufig verwendet wird. Der Garbage Collector kann diesen Speicher nicht freigeben, da er sich in der Closure befindet.

JavaScript ist endlos

JavaScript zu beherrschen ist eine endlose Aufgabe, da es so viele Konzepte und Frameworks gibt, die normalerweise nicht von erfahrenen Entwicklern selbst erforscht werden. Sie können Ihren Umgang mit JavaScript erheblich verbessern, indem Sie sich die Grundlagen aneignen und diese häufig üben. Iteratoren und Generatoren sind einige der Konzepte, nach denen Interviews während JavaScript-Interviews gefragt werden.

Eine Einführung in Iteratoren und Generatoren in JavaScript

Machen Sie sich mit Iterator- und Generatormethoden in JS vertraut.

Weiter lesen

Über den Autor