Ein kurzer Vortrag über die Variablenförderung in JavaScript

Vorwort

In ECMAScript6 werden die Schlüsselwörter let und const hinzugefügt, um Variablen zu deklarieren. In Front-End-Interviews werde ich häufig nach den Unterschieden zwischen let, const und var gefragt, wobei es um Wissenspunkte wie Variablenförderung und temporäre Totzone geht. Schauen wir uns an, was variable Werbung und vorübergehende Totzonen sind.

1. Welche Variablen werden gefördert?

Schauen wir uns zunächst die Beschreibung der variablen Promotion in MDN an:

Unter Hoisting versteht man das Verstehen der Funktionsweise des Ausführungskontexts (insbesondere der Erstellungs- und Ausführungsphasen) in JavaScript. Der Begriff „Hoisting“ wurde in JavaScript-Dokumenten vor der ECMAScript® 2015-Sprachspezifikation nicht gefunden.
Im wörtlichen Sinne des Begriffs bedeutet „Variablenpromotion“, dass die Deklaration von Variablen und Funktionen auf der physischen Ebene an den Anfang des Codes verschoben wird, was jedoch nicht korrekt ist. Tatsächlich verschiebt sich die Position der Variablen- und Funktionsdeklarationen im Code nicht, sondern wird während der Kompilierungsphase im Speicher abgelegt.

Einfach ausgedrückt bezieht sich Variablen-Hoisting auf das Verhalten der JavaScript-Engine, die während der Ausführung von JavaScript-Code den Variablendeklarationsteil und den Funktionsdeklarationsteil an den Anfang des Codes hebt. Wenn eine Variable angehoben wird, wird ihr Standardwert auf „undefiniert“ gesetzt. Gerade aufgrund der Variablenförderungsfunktion von JavaScript sind viele Codes nicht sehr intuitiv, was ebenfalls ein Designfehler von JavaScript ist. Obwohl ECMAScript6 diesen Designfehler durch die Einführung eines Blockebenenbereichs und die Verwendung der Schlüsselwörter let und const vermieden hat, wird die Variablenförderung noch lange Zeit bestehen bleiben, da JavaScript abwärtskompatibel sein muss.

Vor ECMAScript6 verwendeten JS-Engines das Schlüsselwort var, um Variablen zu deklarieren. Im var-Zeitalter wird die Variablendeklaration, unabhängig davon, wo sie geschrieben wird, letztendlich an den Anfang des Gültigkeitsbereichs gebracht. Das Folgende deklariert eine Num-Variable im globalen Gültigkeitsbereich und druckt sie vor der Deklaration aus:

console.log(Nummer) 
Var-Nummer = 1

Dies führt zur Ausgabe von „undefined“, da die Variablendeklaration angehoben wird. Dies entspricht:

Variablennummer
console.log(Nummer)
Zahl = 1

Wie Sie sehen, wird num als globale Variable an den Anfang des globalen Bereichs befördert.

Darüber hinaus gibt es im Funktionsumfang auch variable Förderung:

Funktion getNum() {
  console.log(Nummer) 
  Var-Nummer = 1  
}
getNum()

Dies führt ebenfalls zur Ausgabe von „undefined“, da Variablendeklarationen innerhalb einer Funktion an den Anfang des Funktionsbereichs verschoben werden. Es ist gleichbedeutend mit:

Funktion getNum() {
  Variablennummer 
  console.log(Nummer) 
  Zahl = 1  
}
getNum()

Neben der variablen Förderung werden auch Funktionen gefördert. Es gibt zwei Deklarationsformen für benannte Funktionen in JavaScript:

//Funktionsdeklaration:
Funktion foo () {}
//Variablendeklaration: 
var fn = Funktion () {}

Beim Deklarieren einer Funktion in variabler Form wird diese wie gewöhnliche Variablen angehoben, die Funktionsdeklaration wird jedoch an den Anfang des Gültigkeitsbereichs angehoben und der Deklarationsinhalt wird ebenfalls nach oben angehoben. wie folgt:

fn()
var fn = Funktion () {
	console.log(1)  
}
// Ausgabe: Nicht abgefangener TypeError: fn ist keine Funktion

foo()
Funktion foo () {
	console.log(2)
}
// Ausgabe: 2

Wie Sie sehen, wird, wenn fn in variabler Form deklariert und davor ausgeführt wird, eine Fehlermeldung ausgegeben, dass fn keine Funktion ist, da fn zu diesem Zeitpunkt nur eine Variable ist und keiner Funktion zugewiesen wurde, sodass die fn-Methode nicht ausgeführt werden kann.

2. Warum gibt es variable Promotion?

Das Heben von Variablen ist eng mit dem Kompilierungsprozess von JavaScript verbunden: JavaScript durchläuft wie andere Sprachen auch Kompilierungs- und Ausführungsphasen. Während dieser kurzen Kompilierungsphase sammelt die JS-Engine alle Variablendeklarationen ein und macht sie vorab wirksam. Die restlichen Anweisungen werden erst in der Ausführungsphase oder bei Ausführung einer bestimmten Anweisung wirksam. Dies ist der Mechanismus hinter dem variablen Heben.

Warum gibt es also die Variablenpromotion in JavaScript?

Beginnen wir zunächst mit dem Umfang. Der Gültigkeitsbereich bezieht sich auf den Bereich in einem Programm, in dem eine Variable definiert ist, der den Lebenszyklus der Variable bestimmt. Einfach ausgedrückt ist der Gültigkeitsbereich der zugängliche Bereich von Variablen und Funktionen, d. h. der Gültigkeitsbereich steuert die Sichtbarkeit und den Lebenszyklus von Variablen und Funktionen.

Vor ES6 gab es zwei Arten von Bereichen:

• Auf Objekte im globalen Bereich kann von überall im Code zugegriffen werden und ihr Lebenszyklus begleitet den Lebenszyklus der Seite.
• Der Funktionsumfang bezieht sich auf Variablen oder Funktionen, die innerhalb einer Funktion definiert sind. Auf die definierten Variablen oder Funktionen kann nur innerhalb der Funktion zugegriffen werden. Nachdem die Funktion ausgeführt wurde, werden die innerhalb der Funktion definierten Variablen zerstört.

Im Gegensatz dazu unterstützen andere Sprachen im Allgemeinen den Bereich auf Blockebene. Ein Blockbereich ist ein Stück Code, das in geschweifte Klammern eingeschlossen ist. Beispielsweise kann eine Funktion, eine Urteilsanweisung, eine Schleifenanweisung oder sogar eine einzelne {} als Blockbereich betrachtet werden (beachten Sie, dass die {} in einer Objektdeklaration kein Blockbereich ist). Einfach ausgedrückt: Wenn eine Sprache den Gültigkeitsbereich auf Blockebene unterstützt, kann auf die innerhalb des Codeblocks definierten Variablen außerhalb des Codeblocks nicht zugegriffen werden, und die im Codeblock definierten Variablen werden zerstört, nachdem der Code im Codeblock ausgeführt wurde.

Vor ES6 wurde der Blockebenenbereich nicht unterstützt. Ohne Blockebenenbereich besteht das schnellste und einfachste Design darin, Variablen innerhalb des Bereichs einheitlich zu fördern. Dies führt jedoch auch direkt dazu, dass die Variablen, unabhängig davon, wo sie in der Funktion deklariert werden, während der Kompilierungsphase in die Variablenumgebung des Ausführungskontexts extrahiert werden. Daher kann auf diese Variablen überall im gesamten Funktionskörper zugegriffen werden. Dies ist Variablenförderung in JavaScript.

Die Verwendung variabler Werbeaktionen bietet zwei Vorteile:

(1) Leistung verbessern

Bevor der JS-Code ausgeführt wird, werden eine Syntaxprüfung und eine Vorkompilierung durchgeführt, und dieser Vorgang wird nur einmal ausgeführt. Dies geschieht, um die Leistung zu verbessern. Ohne diesen Schritt muss die Variable (Funktion) vor jeder Codeausführung erneut analysiert werden. Dies ist unnötig, da sich der Code der Variable (Funktion) nicht ändert und eine einmalige Analyse ausreicht.

Während des Parsing-Prozesses wird auch vorkompilierter Code für die Funktion generiert. Während der Vorkompilierung werden die deklarierten Variablen und erstellten Funktionen gezählt und die Funktionscodes komprimiert, um Kommentare, unnötige Leerzeichen usw. zu entfernen. Dies hat den Vorteil, dass bei jeder Ausführung einer Funktion Stapelspeicherplatz direkt für die Funktion zugewiesen werden kann (es ist nicht erforderlich, den Stapel erneut zu analysieren, um zu ermitteln, welche Variablen deklariert und welche Funktionen im Code erstellt werden). Aufgrund der Codekomprimierung ist die Codeausführung außerdem schneller.

(2) Bessere Fehlertoleranz

Durch die Variablenförderung kann die Fehlertoleranz von JS bis zu einem gewissen Grad verbessert werden. Siehe den folgenden Code:

ein = 1;
var a;
konsole.log(a); // 1

Wenn keine Variablenförderung vorhanden ist, melden diese beiden Codezeilen einen Fehler, aber aufgrund der Variablenförderung kann dieser Code normal ausgeführt werden.

Obwohl dies während der Entwicklung vermieden werden kann, ist der Code manchmal komplex und die Variable kann aufgrund einer unbeabsichtigten Verwendung zuerst verwendet und später definiert werden. Aufgrund der Existenz der Variablenförderung wird der Code jedoch normal ausgeführt. Versuchen Sie natürlich während des Entwicklungsprozesses zu vermeiden, Variablen zuerst zu verwenden und sie dann zu deklarieren.

Zusammenfassen:

• Das Anheben von Deklarationen während der Analyse und Vorkompilierung kann die Leistung verbessern, indem es Funktionen ermöglicht, bei der Ausführung Stapelspeicherplatz für Variablen vorab zuzuweisen.
• Durch das Anheben von Deklarationen kann auch die Fehlertoleranz des JS-Codes verbessert werden, sodass einige nicht standardmäßige Codes normal ausgeführt werden können.

3. Probleme durch variable Werbung

Aufgrund der Existenz von Variablenpromotion kann das Schreiben von Code mit JavaScript und der gleichen Logik wie in anderen Sprachen zu unterschiedlichen Ausführungsergebnissen führen. Es gibt hauptsächlich zwei Situationen.

(1) Variablen werden überschrieben

Schauen wir uns den folgenden Code an:

Variablenname = "JavaScript"
Funktion showName(){
  konsole.log(Name);
  wenn(0){
   Variablenname = "CSS"
  }
}
Name anzeigen()

Hier wird undefined statt "JavaScript" ausgegeben. Warum?

Zunächst wird beim Ausführen des Funktionsaufrufs „showName“ der Ausführungskontext der Funktion „showName“ erstellt. Anschließend beginnt die JavaScript-Engine mit der Ausführung des Codes innerhalb der Funktion showName. Als erstes wird Folgendes ausgeführt:

konsole.log(Name);

Die Variable name wird benötigt, um diesen Code auszuführen. Es gibt zwei name-Variablen im Code: eine im globalen Ausführungskontext, deren Wert JavaScript ist; die andere im Ausführungskontext der Funktion showName. Da if(0) nie wahr ist, ist der Wert von name CSS. Welches sollte ich also verwenden? Variablen im Kontext der Funktionsausführung sollten zuerst verwendet werden. Denn während der Funktionsausführung sucht JavaScript zunächst im aktuellen Ausführungskontext nach Variablen. Aufgrund der Existenz von Variablen-Hoisting enthält der aktuelle Ausführungskontext den Variablennamen in if(0), dessen Wert undefiniert ist, sodass der erhaltene Wert des Namens undefiniert ist.
Die Ausgabe hier unterscheidet sich von anderen Sprachen, die den Bereich auf Blockebene unterstützen. Beispielsweise gibt die Sprache C globale Variablen aus, sodass hier leicht Missverständnisse auftreten können.

(2) Die Variable wird nicht zerstört

Funktion foo(){
  für (var i = 0; i < 5; i++) {
  }
  konsole.log(i); 
}
foo()

Wenn ähnlicher Code in den meisten anderen Sprachen implementiert wird, wird i nach dem Ende der For-Schleife zerstört, im JavaScript-Code wird der Wert von i jedoch nicht zerstört, sodass die endgültige Ausgabe 5 ist. Dies wird auch durch die Variablenheraufstufung verursacht. Beim Erstellen des Ausführungskontexts wurde die Variable i heraufgestuft, sodass die Variable i beim Ende der For-Schleife nicht zerstört wird.

4. Deaktivieren Sie das variable Heben

Um die oben genannten Probleme zu lösen, führte ES6 die Schlüsselwörter let und const ein, wodurch JavaScript wie andere Sprachen einen Gültigkeitsbereich auf Blockebene hat. Für let und const gibt es keine Variablenförderung. Verwenden wir let zum Deklarieren von Variablen:

console.log(Nummer) 
sei num = 1

// Ausgabe: Nicht erfasster Referenzfehler: Num ist nicht definiert

Wenn Sie es in eine const-Deklaration ändern, ist das Ergebnis dasselbe: Die Deklaration der mit let und const deklarierten Variablen wird gleichzeitig mit der Ausführung des spezifischen Codes wirksam.

Der Mechanismus der Variablenförderung kann zu vielen Fehlfunktionen führen: Variablen, deren Deklaration vergessen wurde, können während der Entwicklungsphase nicht eindeutig erkannt werden, sondern bleiben als undefiniert im Code verborgen. Um Laufzeitfehler zu reduzieren und zu verhindern, dass durch „undefiniert“ unvorhersehbare Probleme verursacht werden, legt ES6 insbesondere eine starke Einschränkung hinsichtlich der Nichtverfügbarkeit vor der Deklaration fest. Es gibt jedoch einen Unterschied zwischen let und const. Mit dem Schlüsselwort let deklarierte Variablen können geändert werden, während die Werte mit const deklarierter Variablen nicht geändert werden können.

Schauen wir uns an, wie ES6 das obige Problem durch den Blockebenenbereich löst:

Funktion fn() {
  varnum = 1;
  wenn (wahr) {
    varnum = 2;  
    console.log(Nummer); // 2
  }
  console.log(Nummer); // 2
}
fn()

In diesem Code wird die Variable num an zwei Stellen definiert, am Anfang des Funktionsblocks und innerhalb des if. Da der Gültigkeitsbereich von var die gesamte Funktion ist, wird während der Kompilierungsphase der folgende Ausführungskontext generiert:

Aus der Variablenumgebung des Ausführungskontexts ist ersichtlich, dass am Ende nur eine Variable num generiert wird und alle Zuweisungsoperationen zu num im Funktionskörper den Wert von num in der Variablenumgebung direkt ändern. Die endgültige Ausgabe des obigen Codes ist also 2. Für den Code mit derselben Logik sollte der endgültige Ausgabewert anderer Sprachen 1 sein, da die Deklaration in if die Variablen außerhalb des Blocks nicht beeinflussen sollte.

Ersetzen wir das Schlüsselwort var durch das Schlüsselwort let und sehen wir uns die Auswirkung an:

Funktion fn() {
  sei num = 1;
  wenn (wahr) {
    sei num = 2;  
    console.log(Nummer); // 2
  }
  console.log(num); // 1
}
fn()

Die Ausführung dieses Codes erzeugt die erwartete Ausgabe. Dies liegt daran, dass das Schlüsselwort let den Gültigkeitsbereich auf Blockebene unterstützt, sodass die JavaScript-Engine die von let in if deklarierten Variablen während der Kompilierungsphase nicht in der Variablenumgebung speichert. Dies bedeutet, dass die von let in if deklarierten Schlüsselwörter nicht so hochgestuft werden, dass sie für die gesamte Funktion sichtbar sind. Der im if-Block gedruckte Wert ist also 2, und nach dem Herausspringen aus dem Block ist der gedruckte Wert 1. Dies entspricht unseren Gewohnheiten: In einem Block deklarierte Variablen wirken sich nicht auf Variablen außerhalb des Blocks aus.

5. Wie unterstützt JS den Blockebenenbereich?

Die Frage ist also, wie ES6 sowohl die Variablenförderungsfunktion als auch den Blockebenenbereich unterstützt. Betrachten wir den Grund aus der Perspektive des Ausführungskontexts.

Die JavaScript-Engine implementiert den Funktionsebenenbereich über eine variable Umgebung. Wie unterstützt ES6 also den Blockebenenbereich basierend auf dem Funktionsebenenbereich? Schauen wir uns zunächst den folgenden Code an:

Funktion fn(){
    var a = 1
    sei b = 2
    {
      sei b = 3
      var c = 4
      sei d = 5
      konsole.log(a)
      console.log(b)
      konsole.log(d)
    }
    console.log(b) 
    console.log(c)
}   
fn()

Wenn dieser Code ausgeführt wird, kompiliert die JavaScript-Engine ihn und erstellt einen Ausführungskontext, bevor der Code sequenziell ausgeführt wird. Das Schlüsselwort let erstellt einen Blockbereich. Welchen Einfluss hat also das Schlüsselwort let auf den Ausführungskontext?

(1) Erstellen Sie einen Ausführungskontext

Der erstellte Ausführungskontext wird in der Abbildung dargestellt:

Aus der obigen Abbildung können wir Folgendes ersehen:

• Mit var deklarierte Variablen werden während der Kompilierungsphase in der Variablenumgebung gespeichert.
• Mit let deklarierte Variablen werden während der Kompilierungsphase in der lexikalischen Umgebung gespeichert.
• Innerhalb eines Funktionsumfangs werden mit let deklarierte Variablen nicht in der lexikalischen Umgebung gespeichert.

(2) Ausführungscode

Wenn der Codeblock ausgeführt wird, wird der Wert von a in der Variablenumgebung auf 1 und der Wert von b in der lexikalischen Umgebung auf 2 gesetzt. Der Ausführungskontext der Funktion ist in der Abbildung dargestellt:

Es ist ersichtlich, dass beim Eintritt in den Bereichsblock einer Funktion die von let im Bereichsblock deklarierten Variablen in einem separaten Bereich der lexikalischen Umgebung gespeichert werden. Die Variablen in diesem Bereich wirken sich nicht auf die Variablen außerhalb des Bereichsblocks aus. Wenn beispielsweise die Variable b außerhalb des Bereichs deklariert ist und die Variable b auch innerhalb des Bereichsblocks deklariert ist, existieren sie alle unabhängig voneinander, wenn die Ausführung in den Bereich eintritt.

Tatsächlich wird innerhalb der lexikalischen Umgebung eine Stapelstruktur aufrechterhalten. Der unterste Teil des Stapels ist die äußerste Variable der Funktion. Nach dem Eintritt in einen Bereichsblock werden die Variablen innerhalb des Bereichsblocks an den oberen Rand des Stapels verschoben. Wenn die Bereichsausführung abgeschlossen ist, werden die Informationen des Bereichs vom oberen Rand des Stapels abgerufen. Dies ist die Struktur der lexikalischen Umgebung. Die Variablen beziehen sich hier auf die durch let oder const deklarierten Variablen.

Als nächstes muss, wenn console.log(a) im Bereichsblock ausgeführt wird, der Wert der Variable a in der lexikalischen Umgebung und der Variablenumgebung gesucht werden. Die Suchmethode lautet: Suche nach unten entlang der Spitze des Stapels der lexikalischen Umgebung. Wenn er in einem Block in der lexikalischen Umgebung gefunden wird, wird er direkt an die JavaScript-Engine zurückgegeben. Wenn er nicht gefunden wird, wird die Suche in der Variablenumgebung fortgesetzt. So wird die Variablensuche durchgeführt:

Wenn der Bereichsblock ausgeführt wird, werden die darin definierten Variablen vom oberen Rand des lexikalischen Umgebungsstapels entfernt und der endgültige Ausführungskontext sieht wie in der Abbildung dargestellt aus:

Der Blockebenenbereich wird durch die Stapelstruktur der lexikalischen Umgebung implementiert, und das Heben von Variablen wird durch die Variablenumgebung implementiert. Durch die Kombination der beiden unterstützt die JavaScript-Engine sowohl das Heben von Variablen als auch den Blockebenenbereich.

6. Temporäre tote Zone

Schauen wir uns abschließend das Konzept der temporären Totzone an:

Variablenname = "JavaScript";
{
	Dateiname = "CSS";
	lass benennen;
}

// Ausgabe: Nicht erfasster Referenzfehler: Auf „Name“ kann vor der Initialisierung nicht zugegriffen werden

ES6 legt fest: Wenn let und const in einem Block vorhanden sind, bilden die durch diese beiden Schlüsselwörter in diesem Block deklarierten Variablen von Anfang an einen geschlossenen Bereich. Wenn Sie versuchen, eine solche Variable zu verwenden, bevor Sie sie deklariert haben, wird eine Fehlermeldung angezeigt. Dieser Bereich, in dem ein Fehler gemeldet wird, ist eine temporäre tote Zone. Der Bereich über Zeile 4 des obigen Codes ist die temporäre Totzone.

Wenn Sie erfolgreich auf die globale Namensvariable verweisen möchten, müssen Sie die let-Deklaration entfernen:

Variablenname = "JavaScript";
{
	Dateiname = "CSS";
}

An diesem Punkt wird das Programm normal ausgeführt. Tatsächlich bedeutet dies nicht, dass die Engine nichts von der Existenz der Variable name weiß. Im Gegenteil, sie ist sich dessen bewusst und weiß ganz klar, dass name im aktuellen Block mit let deklariert ist. Aus diesem Grund wird dieser Variablen eine temporäre Totzonenbegrenzung hinzugefügt. Sobald Sie das Schlüsselwort „let“ entfernen, hat es keine Auswirkung mehr.

Tatsächlich ist dies das Wesen der temporären toten Zone: Wenn der Kontrollfluss des Programms in einem neuen Bereich instantiiert wird, werden die mit let oder const in diesem Bereich deklarierten Variablen zuerst in diesem Bereich erstellt, aber zu diesem Zeitpunkt sind sie noch nicht lexikalisch gebunden, sodass auf sie nicht zugegriffen werden kann. Wenn auf sie zugegriffen wird, wird ein Fehler ausgegeben. Daher wird die Zeit zwischen dem Zeitpunkt, an dem der laufende Prozess in den Bereich eintritt, um eine Variable zu erstellen, und dem Zeitpunkt, an dem auf die Variable zugegriffen werden kann, als temporäre Totzone bezeichnet.

Vor dem Erscheinen der Schlüsselwörter let und const war der Operator typeof 100 % sicher. Jetzt kann er auch vorübergehende tote Zonen verursachen. Das Einführen öffentlicher Module mit dem Schlüsselwort import und das Erstellen von Klassen mit new class kann ebenfalls vorübergehende tote Zonen verursachen. Der Grund dafür ist, dass Variablen deklariert werden, bevor sie verwendet werden.

typeof a // Nicht abgefangener Referenzfehler: a ist nicht definiert
sei a = 1

Wie Sie sehen, tritt ein Fehler auf, wenn Sie das Schlüsselwort typeof vor der Deklaration von a verwenden. Dies wird durch eine temporäre tote Zone verursacht.

Zusammenfassen

Dies ist das Ende dieses Artikels zur JavaScript-Variablenförderung. Weitere relevante Inhalte zur JavaScript-Variablenförderung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!