Detaillierte Erläuterung der JavaScript-Variablendeklaration und des Ersetzens globaler Variablen durch lokale Variablen

Dinge, die außerhalb des Funktionskörpers definiert sind, sind globale Variablen, und diejenigen, die innerhalb des Funktionskörpers definiert sind, sind lokale Variablen. Die Definition hier bezieht sich auf die Deklaration durch var.

JavaScript verfügt über das Konzept impliziter Globals, was bedeutet, dass jede Variable, die Sie nicht deklarieren, zu einer globalen Objekteigenschaft wird. Beispiel:

function test(){
    myname = "huming";
    alert(myname);
}
test();　　// "huming"
alert(myname);　　//"huming"

Die beiden Ergebnisse sind gleich, was darauf hinweist, dass myname eine globale Variable ist.

Gibt es also einen Unterschied zwischen impliziten globalen Variablen und explizit definierten globalen Variablen? . Die Antwort ist definitiv Ja, schauen Sie sich das folgende Beispiel an:

// 定义三个全局变量
var global_test1 = 1;
global_test2 = 2; // 反面教材
(function () {
    global_test3 = 3; // 反面教材
}());
// 试图删除
delete global_test1; // false
delete global_test2; // true
delete global_test3; // true
// 测试该删除
alert(typeof global_test1); // "number"
alert(typeof global_test2); // "undefined"
alert(typeof global_test3); // "undefined"

Wie aus dem obigen Beispiel ersichtlich ist, kann global_test1, das durch var außerhalb der Funktion definiert ist, nicht gelöscht werden, während global_test2 und global_test3 nicht durch var definiert sind . werden gelöscht (unabhängig davon, ob sie innerhalb des Funktionskörpers erstellt wurden oder nicht).

Zusammenfassend lässt sich sagen, dass globale Variablen, die über var außerhalb der Funktion deklariert wurden, nicht gelöscht werden können, implizite globale Variablen jedoch.

Hier ist etwas zu beachten: JavaScript hat ein Verhalten namens „Hoisting“ (Suspendieren/Top-Parsing/Vorparsing).

Lassen Sie uns dies anhand eines Beispiels veranschaulichen:

var myname = "huming"; //声明全局变量
function test() {
    alert(myname);
    var myname = "local_huming";
    alert(myname);
}
test();

Glauben Sie, dass die Inhalte der beiden Warnungen konsistent sind? ? Offensichtlich inkonsistent, natürlich konsistent. . Die tatsächliche Ausgabe ist: „undefiniert“, „local_huming“.

Das obige Beispiel entspricht

var myname = "huming"; //声明全局变量
function test() {
　　var myname;
　　alert(maname);<br>　　myname = "local_huming";
　　alert(myname);    // "local"
}
test();

Der von der ersten Warnung ausgegebene myname ist nicht die globale Variable, die Sie vermuten, sondern befindet sich im selben Gültigkeitsbereich (einem Funktionskörper) wie die lokale Variable Variablen. Obwohl es nicht deklariert wurde, wird es als solches behandelt. Dies nennt man „Heben“.

Das sollte es klarstellen. Wenn Sie eine Variable in einem Funktionskörper verwenden und sie später erneut deklarieren, kann ein Fehler auftreten.

Schreibspezifikationen:

function test() {
   var a = 1,
       b = 2,
       c = a + b,
       d = {},
       e,
       f;
   // function body...
}

Die Vorteile sind:

1. Alle lokalen Variablen werden am Anfang der Funktion definiert, sodass sie leicht zu finden ist >

2. Verhindern Sie Logikfehler, wenn eine Variable verwendet wird, bevor sie definiert ist.

Wie ersetzt man?

Wenn es darum geht, die JavaScript-Leistung zu verbessern, ist der am häufigsten gehörte Vorschlag die Verwendung lokaler Variablen anstelle globaler Variablen. Dies ist ein Rat, der mir in Erinnerung geblieben ist und den ich in meinen neun Jahren in der Webentwicklung nie in Frage gestellt habe. Er basiert auf der Handhabung der Scoping- und Identifier-Auflösungsmethode (Identifier-Auflösung) durch JavaScript.

Zunächst müssen wir klarstellen, dass Funktionen in JavaScript als Objekte verkörpert sind. Der Prozess der Erstellung einer Funktion ist eigentlich der Prozess der Erstellung eines Objekts. Jedes Funktionsobjekt verfügt über eine interne Eigenschaft namens [[Scope]], die die Bereichsinformationen zum Zeitpunkt der Erstellung der Funktion enthält. Tatsächlich entspricht das Attribut [[Scope]] einer Liste von Objekten (Variablenobjekten), und auf die Objekte in der Liste kann innerhalb der Funktion zugegriffen werden. Wenn wir beispielsweise eine globale Funktion A erstellen, enthält die interne Eigenschaft [[Scope]] von A nur ein globales Objekt (Global Object), und wenn wir in A eine neue Funktion B erstellen, enthält das Attribut [[Scope]] von B Zwei Objekte: Das Aktivierungsobjektobjekt der Funktion A befindet sich vorne und das globale Objekt (Global Object) hinten.

Wenn eine Funktion ausgeführt wird, wird automatisch ein ausführbares Objekt (Ausführungsobjekt) erstellt und an eine Bereichskette (Scope Chain) gebunden. Die Bereichskette wird durch die folgenden zwei Schritte zur Identifikatorauflösung erstellt.

Kopieren Sie zunächst die Objekte in den internen Eigenschaften des Funktionsobjekts [[Scope]] der Reihe nach in die Bereichskette.

Zweitens wird bei Ausführung der Funktion ein neues Aktivierungsobjektobjekt erstellt. Dieses Objekt enthält die Definitionen davon, Parameter (Argumente) und lokale Variablen (einschließlich benannter Parameter). An der Vorderseite der Zielfernrohrkette platziert.

Wenn während der Ausführung von JavaScript-Code ein Bezeichner angetroffen wird, wird dieser in der Bereichskette des Ausführungskontexts (Ausführungskontext) basierend auf dem Namen des Bezeichners durchsucht. Beginnen Sie mit dem ersten Objekt in der Bereichskette (dem Aktivierungsobjekt der Funktion). Wenn es nicht gefunden wird, suchen Sie nach dem nächsten Objekt in der Bereichskette usw., bis die Definition des Bezeichners gefunden wird. Wenn das letzte Objekt im Bereich, also das globale Objekt, nicht gefunden wird, wird ein Fehler ausgegeben, der den Benutzer darauf hinweist, dass die Variable nicht definiert ist. Dies ist das im ECMA-262-Standard beschriebene Funktionsausführungsmodell und der Bezeichnerauflösungsprozess. Es stellt sich heraus, dass die meisten JavaScript-Engines tatsächlich auf diese Weise implementiert sind. Es ist zu beachten, dass ECMA-262 die Verwendung dieser Struktur nicht vorschreibt, sondern nur diesen Teil der Funktion beschreibt.

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Variablendeklaration und des Ersetzens globaler Variablen durch lokale Variablen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!