JavaScript-Verknüpfungen: Eine grundlegende Anleitung

Ihre Aufmerksamkeit ist eine Übersetzung eines Artikels von Parathan Thiyagalingam, der auf medium.freecodecamp.org veröffentlicht wurde. Möchten Sie wissen, wie JavaScript-Verschlüsse funktionieren? Schau unter die Katze!


Foto Austin Distel mit Unsplash

Ein Abschluss ist eine Kombination aller Variablen im Gültigkeitsbereich zum Zeitpunkt der Funktionserstellung. Um Closure verwenden zu können, müssen Sie eine verschachtelte Funktion erstellen, dh eine Funktion innerhalb der Funktion. Die innere Funktion hat auch nach Abschluss der äußeren Funktion Zugriff auf Variablen im Bereich der äußeren Funktion. (Es ist der Abschluss , der diesen Zugriff ermöglicht.) Jedes Mal, wenn eine Funktion erstellt wird, wird der Abschluss erstellt.

Bevor Sie das Konzept der Schließungen verstehen, sollten Sie sich die Bereichsketten in JavaScript überlegen.

In der Regel gibt es zwei Arten von Sichtbarkeitsbereichen: globale und lokale.

In JavaScript kann auf eine Variable innerhalb einer Funktion nicht extern zugegriffen werden - im Gegensatz zu beispielsweise Variablen innerhalb eines Blocks (unter Bedingungen wie if und while ).

Auf dieser Grundlage hat eine Funktion in JavaScript einen Gültigkeitsbereich, ein Block jedoch nicht.

 var a = 10; function app(){ var b = 2; console.log(a); // 10 console.log(b); // 2 } console.log(b); // ReferenceError: b is not defined app(); 

Wie wir bereits wissen, ist a eine globale Variable und b ist lokal, dh wird nur von der app Funktion verwendet. Außerhalb des lokalen Bereichs haben wir keinen Zugriff auf die lokale Variable.

Verwendung einer verschachtelten Funktion (Funktion innerhalb einer Funktion)

 var a = 10; function app(){ var b = 2; var d = 3; function add(){ var c = a + b; } return add; } var x = app(); console.dir(x); 

Im obigen Beispiel ist app die übergeordnete Funktion, add die untergeordnete Funktion.

• Anstelle von console.log wird console.dir verwendet, um alle Eigenschaften des ausgewählten Objekts anzuzeigen.
• Die Variable x wird der app Funktion zugewiesen, die dann die add Funktion zurückgibt. Auf diese Weise können Sie alle Eigenschaften des Objekts der Funktion add anzeigen.

Wenn Sie die Konsole in einem Browser öffnen, finden Sie das Closure Objekt im Scopes -Datenarray.



Da die Funktion "Intern add Zugriff auf die Variablen b und d hat , die zur externen Funktion gehören, werden diese beiden Variablen als Referenz zum Objekt " Closure hinzugefügt.
Betrachten Sie ein anderes Schließungsbeispiel.

 var a = 10; var startFunc; function app(){ var b = 2; function add(){ var c = a + b; console.log(c); } startFunc = add(); } app(); // Invoke the app function startFunc; // as the app function invoked above will assign the add function to startFunc & console the value of c 

• Der globalen Funktion startFunc die Funktion add zugewiesen, die ein startFunc der app für übergeordnete Funktionen ist.
• Dies wird erst nach Aufruf der App-Funktion möglich. Andernfalls startFunc Funktion startFunc wie eine globale Variable ohne zugewiesenen Wert.

Verwendung von Verschlüssen in JavaScript

Viele von uns, die beim Schreiben von Code Verschlüsse verwenden, verstehen nicht ganz, warum sie dies tun. In JavaScript fehlen die öffentlichen , geschützten und privaten Modifikatoren, die in objektorientierten Programmiersprachen enthalten sind. Um den Zugriff auf den Namespace für externen Code zu blockieren, müssen wir daher auf die Hilfe von Funktionen zurückgreifen.

Und da es sich um Funktionen handelt, startet die sofort aufgerufene Funktion (IIFE) unmittelbar nach der Ansage. Sie muss nicht einmal angerufen werden.

Die IIFE-Syntax sieht folgendermaßen aus:

 (function(){ //variables & scope that inside the function })(); 

Betrachten Sie dieses Beispiel:

 var studnetEnrollment = (function () { //private variables which no one can change //except the function declared below. var count = 0; var prefix = "S"; // returning a named function expression function innerFunc() { count = count + 1; return prefix + count; }; return innerFunc; })(); var x = studnetEnrollment(); // S1 console.log(x); var y = studnetEnrollment(); // S2 console.log(y); 

count und prefix sind zwei private Variablen, die nicht geändert werden können. Der Zugriff auf sie ist nur für die interne Funktion geöffnet (in unserem Fall ist dies die innerFunc Funktion).

• Beim ersten studentEnrollment Funktion studentEnrollment erhöht die Funktion studentEnrollment den Wert der Zählvariablen auf 1.
• Beim zweiten Mal steigt die count von 1 auf 2.
• All dies ist nur durch Schließen möglich.

Fazit

Ein Abschluss ist eine Menge von Variablen einer externen Funktion, aufgrund derer der Umfang der internen Funktion Zugriff auf diese Variablen erhält. Dies schützt den globalen Namespace.

Die Schließungsfunktion ermöglicht es Entwicklern, sauberen Code zu schreiben - beispielsweise in objektorientierten Programmiersprachen, Code, in dem globale und lokale Variablen nicht verwechselt werden.

---

Hab eine schöne Codierung!