JavaScript Closures

JavaScript-Variablen können lokale oder globale Variablen sein.

Private Variablen können Closures nutzen.

Globale Variablen

Eine Funktion kann auf Variablen zugreifen, die innerhalb der Funktion definiert sind, zum Beispiel:

Beispiele

function myFunction() { var a = 4; return a * a; }

Selbst ausprobieren »

Funktionen können auch auf Variablen zugreifen, die außerhalb der Funktion definiert sind, zum Beispiel:

Beispiele

var a = 4; function myFunction() { return a * a; }

Selbst ausprobieren »

Im letzteren Beispiel istaeineglobaleVariable.

Auf einer Webseite gehören globale Variablen zum window-Objekt.

Globale Variablen können von allen Skripten auf der Seite verwendet werden.

Im ersten Beispiel istaeinelokaleVariable.

Lokale Variablen können nur innerhalb der Funktion verwendet werden, die sie definiert. Sie sind für andere Funktionen oder Skriptcode nicht verfügbar.

Selbst wenn globale und lokale Variablen denselben Namen haben, sind sie zwei verschiedene Variablen. Das Ändern der einen wirkt sich nicht auf den Wert der anderen aus.

Note Wenn eine Variable deklariert wird, ohne dasvar-Schlüsselwort zu verwenden, dann ist sie eine globale Variable, selbst wenn sie innerhalb einer Funktion definiert ist.

Lebenszyklus von Variablen

Der Gültigkeitsbereich globaler Variablen ist global; das heißt, im gesamten JavaScript-Programm sind globale Variablen überall.

Variablen, die innerhalb einer Funktion deklariert werden, funktionieren nur innerhalb der Funktion. Diese Variablen sind lokale Variablen, und ihr Gültigkeitsbereich ist lokal; Funktionsparameter sind ebenfalls lokal, und sie funktionieren nur innerhalb der Funktion.

Das Zählerdilemma

Stellen Sie sich vor, Sie möchten einige Werte zählen, und der Zähler ist in allen Funktionen verfügbar.

Du kannst eine globale Variable verwenden, und eine Funktion erhöht den Zähler:

Beispiele

var counter = 0; function add() { return counter += 1; } add(); add(); add(); //Der Zähler ist jetzt 3

Selbst ausprobieren »

Der Zählerwert ändert sich, wenn die Funktion add() ausgeführt wird.

Aber hier ist das Problem: Jedes Skript auf der Seite kann den Zähler ändern, selbst ohne die Funktion add() aufzurufen.

Wenn ich den Zähler innerhalb einer Funktion deklariere, kann der Wert des Zählers nicht geändert werden, ohne die Funktion aufzurufen:

Beispiele

function add() { var counter = 0; return counter += 1; } add(); add(); add(); //Die Absicht war, 3 auszugeben, aber entgegen den Erwartungen wird jedes Mal 1 ausgegeben!

Selbst ausprobieren »

Der obige Code liefert nicht die korrekte Ausgabe; jedes Mal, wenn ich die Funktion add() aufrufe, wird der Zähler auf 1 gesetzt.

Verschachtelte Funktionen in JavaScript können dieses Problem lösen.

Verschachtelte Funktionen in JavaScript

Alle Funktionen können auf globale Variablen zugreifen.

Tatsächlich können in JavaScript alle Funktionen auf den Gültigkeitsbereich eine Ebene über ihnen zugreifen.

JavaScript unterstützt verschachtelte Funktionen. Verschachtelte Funktionen können auf Variablen der Funktion eine Ebene darüber zugreifen.

In diesem Beispiel kann die verschachtelte Funktionplus()auf diecounter-Variablen der übergeordneten Funktion zugreifen:

Beispiele

function add() { var counter = 0; function plus() {counter += 1;} plus(); return counter; }

Selbst ausprobieren »

Wenn wir von außen auf dieplus()-Funktion zugreifen können, löst dies das Zähler-Dilemma.

Wir müssen außerdem sicherstellen, dasscounter = 0nur einmal ausgeführt wird.

Wir brauchen Closures.

JavaScript Closures

Erinnern Sie sich an selbstaufrufende Funktionen? Was macht diese Funktion?

Beispiele

var add = (function () { var counter = 0; return function () {return counter += 1;} })(); add(); add(); add(); //Zähler ist 3

Selbst ausprobieren »

Beispielanalyse

Der Variableaddwird der Rückgabewert der selbstaufrufenden Funktion zugewiesen.

Die selbstaufrufende Funktion wird nur einmal ausgeführt. Sie setzt den counter auf 0 und gibt einen Funktionsausdruck zurück.

Die Variable add kann als Funktion verwendet werden. Das Tolle daran ist, dass sie auf den counter im Gültigkeitsbereich der übergeordneten Funktion zugreifen kann.

Dies wird JavaScriptClosures genannt.Es ermöglicht Funktionen, private Variablen zu haben.

Der counter ist durch den Gültigkeitsbereich der anonymen Funktion geschützt und kann nur über die add-Methode geändert werden.

Note

Closures sind ein Mechanismus zum Schutz privater Variablen. Sie erzeugen einen privaten Gültigkeitsbereich, wenn eine Funktion ausgeführt wird, und schützen dadurch interne private Variablen vor äußeren Eingriffen.

Intuitiv ist ein Closure wie eine Stack-Umgebung, die nie zerstört wird.
Andere Erweiterungen