Heim > Web-Frontend > js-Tutorial > JavaScript enträtseln: Ein tiefer Einblick in Hebevorgänge, zeitliche Totzonen und variable Zustände

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

WBOY
Freigeben: 2024-07-26 18:11:53
Original
637 Leute haben es durchsucht

Unraveling JavaScript: A Deep Dive into Hoisting, Temporal Dead Zone, and Variable States

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

  • Heben
  • Zeitliche 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.

Hebe-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;
Nach dem Login kopieren

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 beachtet, aber zu diesem Zeitpunkt führt die Engine den Code nicht aus; es zeichnet lediglich die Existenz einer Zuweisung zu einer Variablen namens name auf.

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: let name;

Wenn der Compiler auf den Let-Namen stößt; Deklaration bestätigt, dass name blockbezogen sein 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 in der TDZ und der Zuweisungsname = 'ashu'; führt zu einem ReferenceError.


Zweite Zeile: let name;

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

Jetzt Bonus-Tipp

Unterschied zwischen undeclare vs. undefiniert vs. nicht initialisiert;

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

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 in **Let**

übernommen wurde

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!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage