JavaScript-Closure

JavaScript Variablen gehören zulokaloderGlobaleKontext.

Globale Variablen können durchKlonerealisieren lokale (private).

Globale Variablen

Funktionen können auf Funktionen zugreifenInnerDefinierte Variablen, wie z.B.:

Beispiel

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

Versuchen Sie es selbst

Aber die Funktion kann auch auf die Funktionen zugreifenAußenDefinierte Variablen, wie z.B.:

Beispiel

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

Versuchen Sie es selbst

Im letzten Beispiel,a istGlobaleVariablen.

In der Webseite gehören globale Variablen dem window-Objekt.

Globale Variablen können von allen Skripten auf der Seite (und im Fenster) verwendet und geändert werden.

Im ersten Beispiel,a istLokaleVariablen.

Lokale Variablen können nur im Bereich der Funktion verwendet werden, in der sie definiert wurden. Sie sind für andere Funktionen und Skriptcode unsichtbar.

Globale Variablen mit dem gleichen Namen und lokale Variablen sind unterschiedliche Variablen. Änderungen an einem ändern den anderen nicht.

ohneSchlüsselwort var Erstellte Variablen sind immer global, selbst wenn sie in einer Funktion erstellt werden.

Lebensdauer der Variablen

Globale Variablen leben so lange wie Ihre Anwendung (Fenster, Webseite).

Lokale Variablen leben nicht lange. Sie werden bei der Funktionsauf呼叫创建， und werden nach Abschluss der Funktion gelöscht.

Eine Zählerkrise

Angenommen, Sie möchten eine Variable zur Zählung verwenden und Sie möchten, dass dieser Zähler für alle Funktionen verfügbar ist.

Sie können globale Variablen und Funktionen verwenden, um den Zähler zu erhöhen:

Beispiel

// Initialisierung des Zählers
var counter = 0;
// Funktion zum Inkrementieren des Zählers
function add() {
  counter += 1;
}
// Aufruf von add() dreimal
add();
add();
add();
// Der Zähler sollte 3 sein

Versuchen Sie es selbst

Das obige Lösung hat ein Problem: Jeder Code auf der Seite kann den Zähler ändern, ohne add() aufzurufen.

Für die Funktion add() sollte der Zähler lokal sein, um zu verhindern, dass andere Code den Zähler ändert:

Beispiel

// Initialisierung des Zählers
var counter = 0;
// Funktion zum Inkrementieren des Zählers
function add() {
  var counter = 0; 
  counter += 1;
}
// Aufruf von add() dreimal
add();
add();
add();
// Der Zähler sollte 3 sein. Aber es ist 0.

Versuchen Sie es selbst

Es ist nutzlos, weil wir den globalen Zähler anstatt des lokalen Zählers anzeigen.

Durch das Zurückgeben der Funktion können wir den globalen Zähler löschen und auf den lokalen Zähler zugreifen:

Beispiel

// Funktion zum Inkrementieren des Zählers
function add() {
  var counter = 0; 
  counter += 1;
  return counter;
}
// Aufruf von add() dreimal
add();
add();
add();
// Der Zähler sollte 3 sein. Aber es ist 1.

Versuchen Sie es selbst

Es ist nutzlos, weil wir den lokalen Zähler jedes Mal zurücksetzen, wenn wir die Funktion aufrufen.

JavaScript interne Funktionen können dieses Problem lösen.

Eingebettete Funktionen in JavaScript

Alle Funktionen haben das Recht, auf den globalen Kontext zuzugreifen.

Tatsächlich haben alle Funktionen in JavaScript das Recht, auf den Kontext ' darüber ' zuzugreifen.

JavaScript unterstützt eingebettete Funktionen. Eingebettete Funktionen können auf den übergeordneten Kontext zugreifen.

In diesem Beispiel, die internen Funktionen plus() können auf die Elternfunktion zugreifen counter Zähler-Variablen:

Beispiel

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

Versuchen Sie es selbst

So können wir das Problem des Zählers lösen, wenn wir von außen darauf zugreifen können plus() Funktion.

Wir müssen auch eine Funktion finden, die nur einmal ausgeführt wird counter = 0 Methode.

Wir benötigen Klone (closures).

JavaScript-Closure

Denken Sie an die selbstaufrufende Funktion? Was macht diese Funktion?

Beispiel

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

Versuchen Sie es selbst

Beispiel-Explaination

Variable add Die Zuweisung ist der Rückgabewert der selbstaufrufenden Funktion.

Diese selbstaufrufende Funktion wird nur einmal ausgeführt. Sie setzt den Zähler auf 0 (null) und gibt die Funktionsausdrucksform zurück.

So wird add zu einer Funktion. Der 'spannendste' Teil ist, dass er den Zähler im Elternbereich ansprechen kann.

Das wird als JavaScript bezeichnet Klone. Es ermöglicht der Funktion, "PrivatWird möglich durch die Variable.

Der Zähler wird durch den Bereich der anonymen Funktion geschützt und kann nur durch die Funktion add geändert werden.

Klone sind Funktionen, die den Zugriff auf den Elternbereich haben, selbst wenn der Elternfunktion nach dem Schließen nicht mehr zugriffbar.