JavaScript enträtseln: Ein tiefer Einblick in Hebevorgänge, zeitliche Totzonen und variable Zustände

Unten habe ich zwei süße und einfache Codezeilen. Aber ich kann Ihnen garantieren, dass es Sie entweder sehr verwirren wird (z. B. weil Sie das Unterstreichungsprinzip von JS ignoriert haben) oder Sie trösten wird.

Aber es verfügt über vollständig geladene Wissenskonzepte wie unten aufgeführt

• Heben
• Temporale Totzone
• Variable (nicht deklariert, nicht initialisiert, nicht definiert) (Bonus)

Meine widersprüchliche Aussage
wie var, const und let erhöhen auch ihre Eigenschaften, aber sie befinden sich in einer anderen Zone.

Hoisting Def (Einfache/Laienversion)

1. Wir können vor der eigentlichen Deklaration auf Funktionen und Variablen zugreifen.

Jetzt ist es an der Zeit, sich eingehend damit zu befassen, wie Js unseren zweizeiligen Code kompilieren und ausführen

In JavaScript kann die Art und Weise, wie Compiler und Engine mit Variablendeklarationen und -zuweisungen umgehen, nuanciert werden, insbesondere beim Umgang mit let und var.
Lassen Sie uns den Prozess sowohl aus der Compiler- als auch aus der Ausführungsperspektive für den angegebenen Code aufschlüsseln:

name = 'ashu';
let name;

An dieser Stelle mache ich klar, dass beim Schreiben des Javascript-Codes der erste Parser und Compiler unseren Code kompiliert und er dann in die Ausführungsphase geht.

Compiler-Perspektive
Erste Zeile: Name = 'ashu';

Während der Kompilierungsphase,
Die JavaScript-Engine analysiert den Code und erstellt die erforderlichen Bereiche.
Der Aufgabenname = 'ashu';

wird notiert, aber zu diesem Zeitpunkt führt die Engine den Code nicht aus; es zeichnet lediglich die Existenz einer Zuweisung zu einer Variablen namens name.

Wenn der Name noch nicht deklariert wurde, behandelt der Compiler ihn als Zuweisung an eine globale Variable (Var-Name im globalen Bereich), da Var-Deklarationen global erhoben und zugänglich sind.

Zweite Zeile: Namen nennen;

Wenn der Compiler auf den Let-Namen stößt; Deklaration erkennt an, dass Name einen Blockbereich haben sollte.

Der Compiler platziert den Namen in der Temporal Dead Zone (TDZ) für den Bereich, zu dem er gehört,
Das heißt, es erkennt die Existenz des Namens an, markiert ihn jedoch als nicht initialisiert.

Die let-Deklaration wird nicht auf die gleiche Weise angehoben wie var.

Stattdessen wird eine Bindung im Bereich erstellt und diese nur initialisiert, wenn die Deklaration ausgeführt wird.

Ausführungsperspektive

Erste Zeile: Name = 'ashu';

Wenn die JavaScript-Engine die Zuweisung name = 'ashu'; ausführt,
Es prüft, ob der Name im aktuellen Bereich vorhanden ist. Da name mit let deklariert wird, sich aber in der TDZ (Temporal Dead Zone) befindet, führt jeder Versuch, darauf zuzugreifen, bevor die let-Deklaration initialisiert wurde, zu einem ReferenceError.

Daher steht an dieser Stelle der Name im TDZ und der Zuweisungsname = 'ashu'; führt zu einem ReferenceError.

Zweite Zeile: Namen nennen;

Diese Zeile initialisiert die Namensvariable innerhalb des Blockbereichs.
Ab diesem Zeitpunkt befindet sich Name nicht mehr in der TDZ und kann fehlerfrei aufgerufen bzw. zugewiesen werden.

Jetzt Bonus-Tipp

Unterschied zwischen undeclare vs. undefiniert vs. nicht initialisiert;

undeclare: – Variable ist noch nicht deklariert.
undefiniert: – Variable deklariert, aber nicht initialisiert;
uninitialisiert: – Variable definiert, aber ihr Wert wird später kommen.

Beispiel:- const result = multiplyBy2(5);
Bis der Rückgabewert der Funktion dem Ergebnis zugewiesen wird, befindet es sich bis dahin in der nicht initialisierten Zone.

interessante Tatsache:-

Sie kennen die zeitliche Totzone, die ursprünglich für Const vorgesehen war, aber später wurde sie in **Let**

Referenz:-

1. https://frontendmasters.com/courses/deep-javascript-v3 + Meine Analogie zusammen mit GitHub-Copilot

Das obige ist der detaillierte Inhalt vonJavaScript enträtseln: Ein tiefer Einblick in Hebevorgänge, zeitliche Totzonen und variable Zustände. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!