"Si un ouvrier veut bien faire son travail, il doit d'abord affûter ses outils." - Confucius, "Les Entretiens de Confucius. Lu Linggong"
Page de garde > La programmation > Démêler JavaScript : une plongée approfondie dans le levage, la zone morte temporelle et les états variables

Démêler JavaScript : une plongée approfondie dans le levage, la zone morte temporelle et les états variables

Publié le 2024-07-30
Parcourir:784

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

Ci-dessous, j'ai 2 lignes de code douces et simples. Mais je peux vous garantir que cela vous rendra très confus (par exemple parce que vous avez ignoré le principe souligné de JS) ou vous réconfortera.

Mais il contient des concepts de connaissances complets comme ci-dessous

  • Levage
  • Zone morte temporelle
  • variable (non déclarée, non initialisée, non définie) (Bonus)

Ma déclaration contradictoire
comme var, const et let hissent également leurs propriétés, mais ils sont dans une zone différente.

def de levage (version simple/profane)

  1. nous pouvons accéder aux fonctions et aux variables avant leur déclaration réelle.

Il est maintenant temps d'approfondir la façon dont Js compile et exécute notre code à 2 lignes

En JavaScript, la façon dont le compilateur et le moteur gèrent les déclarations et les affectations de variables peut être nuancée, en particulier lorsqu'il s'agit de let et var.
Décomposons le processus du point de vue du compilateur et de l'exécution pour le code donné :

name = 'ashu';
let name;

à ce stade, je précise que lorsque nous écrivons le code javascript, le premier analyseur et compilateur compile notre code, puis il passe en phase d'exécution.

Perspective du compilateur
Première ligne : nom = 'ashu';

Pendant la phase de compilation,
le moteur JavaScript analyse le code et crée les étendues nécessaires.
Le nom de l'affectation = 'ashu' ;

sera noté, mais à ce stade, le moteur n'exécute pas le code ; il enregistre simplement l'existence d'une affectation à une variable nommée nom.

Si le nom n'a pas été déclaré auparavant, le compilateur le traite comme une affectation à une variable globale (nom de la variable dans la portée globale) puisque les déclarations var sont hissées et accessibles globalement.

Deuxième ligne : let name;

Lorsque le compilateur rencontre le nom let ; déclaration, il reconnaît que nom doit avoir une portée de bloc.

Le compilateur place le nom dans la zone morte temporelle (TDZ) pour la portée à laquelle il appartient,
ce qui signifie qu'il reconnaît l'existence du nom mais le marque comme non initialisé .

La déclaration let n'est pas hissée de la même manière que var.

Au lieu de cela, il crée une liaison dans la portée et l'initialise uniquement lorsque la déclaration est exécutée.

Perspective d'exécution

Première ligne : nom = 'ashu';

Lorsque le moteur JavaScript exécute l'affectation name = 'ashu';,
il vérifie l'existence du nom dans la portée actuelle. Puisque name est déclaré avec let mais se trouve dans la TDZ (Temporal Dead Zone), toute tentative d'y accéder avant que la déclaration let ne soit initialisée entraînera une ReferenceError.

Par conséquent, à ce stade, le nom est dans la TDZ et le nom de l'affectation = 'ashu'; entraîne une ReferenceError.


Deuxième ligne : let name;

Cette ligne initialise la variable de nom dans la portée du bloc.
Après ce point, nom n'est plus dans la TDZ et peut être consulté ou attribué sans erreur.

Maintenant Astuce bonus

différence entre non déclaré, non défini et non initialisé ;

undeclare :- la variable n'est pas encore déclarée.
non défini :- Variable déclarée mais non initialisée ;
non initialisé :- variable définie mais sa valeur viendra plus tard.

Ex : - résultat const = multiplierBy2(5);
jusqu'à ce que la valeur de retour de la fonction soit attribuée au résultat jusqu'à ce que ce soit dans une zone non initialisée.

Fait intéressant :-

Vous connaissez la zone morte temporelle initialement décorée pour Const mais le moment tardif qu'ils ont adopté dans **Let**

Référence:-

  1. https://frontendmasters.com/courses/deep-javascript-v3 Mon analogie avec le copilote de GitHub
Déclaration de sortie Cet article est reproduit sur : https://dev.to/ashutoshsarangi/unraveling-javascript-a-deep-dive-into-hoisting-temporal-dead-zone-and-variable-states-4d0j?1 En cas de violation , veuillez contacter study_golang @163.comdelete
Dernier tutoriel Plus>

Clause de non-responsabilité: Toutes les ressources fournies proviennent en partie d'Internet. En cas de violation de vos droits d'auteur ou d'autres droits et intérêts, veuillez expliquer les raisons détaillées et fournir une preuve du droit d'auteur ou des droits et intérêts, puis l'envoyer à l'adresse e-mail : [email protected]. Nous nous en occuperons pour vous dans les plus brefs délais.

Copyright© 2022 湘ICP备2022001581号-3