„Wenn ein Arbeiter seine Arbeit gut machen will, muss er zuerst seine Werkzeuge schärfen.“ – Konfuzius, „Die Gespräche des Konfuzius. Lu Linggong“
Titelseite > Programmierung > 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

Veröffentlicht am 30.07.2024
Durchsuche:194

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.

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 Compiler- als auch aus Ausführungsperspektive für den angegebenen Code aufschlüsseln:

name = 'ashu';
let name;

An dieser Stelle mache ich deutlich, 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 auf.

Wenn der Name noch nicht deklariert wurde, behandelt der Compiler ihn als Zuweisung an eine globale Variable (Variablenname im globalen Bereich), da Var-Deklarationen angehoben werden und global 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 aber 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 Zugriffsversuch vor der Initialisierung der let-Deklaration zu einem ReferenceError.

Daher befindet sich der Name an dieser Stelle in der TDZ und die Zuweisung name = '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. zugewiesen werden.

Jetzt Bonus-Tipp

Unterschied zwischen undeclare vs. undefiniert vs. uninitialisiert;

undeclare :- Variable ist noch nicht deklariert.
undefiniert :- Variable deklariert, aber nicht initialisiert;
uninitialisiert: – 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 einer nicht initialisierten Zone.

interessante Tatsache:-

Sie kennen die zeitliche Totzone, die ursprünglich für Const festgelegt wurde, aber der spätere Zeitpunkt wurde in **Let**

übernommen.

Referenz:-

  1. https://frontendmasters.com/courses/deep-javascript-v3 Meine Analogie zusammen mit GitHub-Copilot
Freigabeerklärung Dieser Artikel ist abgedruckt unter: https://dev.to/ashutoshsarangi/unraveling-javascript-a-deep-dive-into-hoisting-temporal-dead-zone-and-variable-states-4d0j?1 Falls ein Verstoß vorliegt Bitte kontaktieren Sie Study_golang @163.comdelete
Neuestes Tutorial Mehr>

Haftungsausschluss: Alle bereitgestellten Ressourcen stammen teilweise aus dem Internet. Wenn eine Verletzung Ihres Urheberrechts oder anderer Rechte und Interessen vorliegt, erläutern Sie bitte die detaillierten Gründe und legen Sie einen Nachweis des Urheberrechts oder Ihrer Rechte und Interessen vor und senden Sie ihn dann an die E-Mail-Adresse: [email protected] Wir werden die Angelegenheit so schnell wie möglich für Sie erledigen.

Copyright© 2022 湘ICP备2022001581号-3