JavaScript-Variablen können zum lokalen oder globalen Bereich gehören.
Globale Variablen können mit Schließungen lokal (privat) gemacht werden.
Globale Variablen
Ein function kann auf alle innerhalb der Funktion definierten Variablen zugreifen, etwa so:
Beispiel
var a = 4;
return a * a;
}
Probieren Sie es selbst aus “
Aber ein function kann auch auf Variablen zugreifen, die außerhalb der Funktion definiert sind, so wie hier:
Beispiel
Funktion myFunction() {
return a * a;
}
Probieren Sie es selbst “
Im letzten Beispiel ist a eine globale Variable.
In einer Webseite gehören globale Variablen zum Fensterobjekt.
Globale Variablen können von allen Skripten in der Seite (und im Fenster) verwendet (und geändert) werden.
Im ersten Beispiel ist a eine lokale Variable.
Eine lokale Variable kann nur innerhalb der Funktion verwendet werden, in der sie definiert ist. Sie ist vor anderen Funktionen und anderem Scripting-Code verborgen.
Globale und lokale Variablen mit demselben Namen sind unterschiedliche Variablen. Wird die eine geändert, ändert sich die andere nicht.
Variablen, die ohne Deklarationsschlüsselwort erstellt werden (varlet, oder const) sind immer global, auch wenn sie innerhalb einer Funktion erstellt werden.
Lebensdauer von Variablen
Globale Variablen leben, bis die Seite verworfen wird, z. B. wenn Sie zu einer anderen Seite navigieren oder das Fenster schließen.
Lokale Variablen haben eine kurze Lebensdauer. Sie werden erstellt, wenn die Funktion aufgerufen wird, und gelöscht, wenn die Funktion beendet ist.
Ein Zähler-Dilemma
Angenommen, Sie wollen eine Variable zum Zählen von etwas verwenden, und Sie wollen, dass dieser Zähler allen Funktionen zur Verfügung steht.
Sie könnten eine globale Variable verwenden, und ein function, um den Zähler zu erhöhen:
Beispiel
var Zähler = 0;
// Funktion zum Erhöhen des Zählers
function add() {
Zähler += 1;
}
// Rufen Sie add() 3 Mal auf
add();
add();
add();
// Der Zähler sollte jetzt 3 sein
Versuchen Sie es selbst “
Es gibt ein Problem mit der obigen Lösung: Jeder Code auf der Seite kann den Zähler ändern, ohne add() aufzurufen.
Der Zähler sollte lokal in der add()-Funktion liegen, um zu verhindern, dass anderer Code ihn verändert:
Beispiel
var Zähler = 0;
// Funktion zum Erhöhen des Zählers
function add() {
var Zähler = 0;
Zähler += 1;
}
// Rufen Sie add() 3 mal auf
add();
add();
add();
//Der Zähler sollte jetzt 3 sein. Aber er ist 0
Versuchen Sie es selbst “
Es hat nicht funktioniert, weil wir den globalen Zähler anstelle des lokalen Zählers anzeigen.
Wir können den globalen Zähler entfernen und auf den lokalen Zähler zugreifen, indem wir ihn von der Funktion zurückgeben lassen:
Beispiel
function add() {
var counter = 0;
counter += 1;
return counter;
}
// Rufen Sie add() 3 Mal auf
add();
add();
//Der Zähler sollte jetzt 3 sein. Aber er ist 1.
Versuchen Sie es selbst “
Es hat nicht funktioniert, weil wir bei jedem Funktionsaufruf den lokalen Zähler zurücksetzen.
Eine JavaScript-interne Funktion kann dies lösen.
JavaScript verschachtelte Funktionen
Alle Funktionen haben Zugriff auf den globalen Bereich.
In der Tat haben in JavaScript alle Funktionen Zugriff auf den Bereich „über“ ihnen.
JavaScript unterstützt verschachtelte Funktionen. Verschachtelte Funktionen haben Zugriff auf den Bereich „über“ ihnen.
In diesem Beispiel hat die innere Funktion plus() Zugriff auf die Variable counter in der Elternfunktion:
Beispiel
var Zähler = 0;
Funktion plus() {Zähler += 1;}
plus();
Rückgabe Zähler;
}
Versuchen Sie es selbst “
Damit hätten wir das Zähler-Dilemma gelöst, wenn wir die plus()-Funktion von außen erreichen könnten.
Wir müssen auch einen Weg finden, counter = 0 nur einmal auszuführen.
Wir brauchen eine Closure.
JavaScript Closures
Erinnern Sie sich an selbstaufrufende Funktionen? Was macht diese Funktion?
Beispiel
var counter = 0;
return function () {counter += 1; return counter}
})();
add();
add();
add()();
// der Zähler ist jetzt 3
Versuchen Sie es selbst “
Beispiel erklärt
Die Variable add wird dem Rückgabewert einer selbstaufrufenden Funktion zugewiesen.
Die selbstinvokierende Funktion wird nur einmal ausgeführt. Sie setzt den Zähler auf Null (0) und gibt einen Funktionsausdruck zurück.
Auf diese Weise wird add zu einer Funktion. Der „wunderbare“ Teil ist, dass sie auf den Zähler im übergeordneten Bereich zugreifen kann.
Dies nennt man eine JavaScript-Schließung. Es macht es möglich, dass eine Funktion „private“ Variablen hat.
Der Zähler ist durch den Bereich der anonymen Funktion geschützt und kann nur mit der add-Funktion geändert werden.
Eine Closure ist eine Funktion, die Zugriff auf den übergeordneten Bereich hat, auch nachdem die übergeordnete Funktion geschlossen wurde.