Maison >interface Web >js tutoriel >Huiste javascript - ce qui bouge et ce qui reste

Huiste javascript - ce qui bouge et ce qui reste

DDD
DDDoriginal
2025-01-30 08:30:10428parcourir

Javascript Hoisting - What Moves and What Stays

Le mécanisme d'amélioration de JavaScript est comme la définition du jeu de scène. Avant que le code ne soit en cours d'exécution (dans le "stade de création"), JavaScript augmentera toute la déclaration en haut de sa portée, tout comme le personnel de la scène déplace les accessoires vers la position spécifiée avant que le rideau ne soit levé. La seule différence est que seule l'instruction est augmentée et que l'initialisation n'a pas été améliorée.

Selon la spécification ECMAScript, ce comportement fait en fait partie de la création de "l'environnement lexical" si appelé à l'étape de la création de JavaScript. Mais ne soyons pas trop techniques, n'oubliez pas que JavaScript le "scannera" avant d'exécuter le code.

Amélioration

var

Dans cet exemple, l'instruction
<code class="language-javascript">console.log(x); // 输出:undefined
var x = 5;
console.log(x); // 输出:5</code>
est promue en haut de la portée, mais l'initialisation

n'a pas été améliorée. C'est pourquoi le premier Output var x au lieu de lancer une erreur. Les variables existent, mais elle n'a pas été attribuée. x = 5 console.log(x) et undefined La zone morte temporaire (TDZ) x

Dans cet exemple, la déclaration let a été améliorée, mais elle a été située dans une zone morte temporaire (TDZ) avant l'initialisation. Essayez d'accéder à const avant que l'initialisation conduise à

. Ce comportement est différent de ,
<code class="language-javascript">console.log(y); // 抛出ReferenceError: Cannot access 'y' before initialization
let y = 10;
console.log(y); // 输出:10</code>
ne retournera que

dans des circonstances similaires. let y y ReferenceError Cela inclut également tout contenu utilisant ou var la déclaration, bien sûr, comprend également des fonctions. var undefined

zone morte temporaire (TDZ)

En parlant de zones mortes temporaires, c'est là que let et const déclarent avant l'initialisation. Différent de Lorsque

renvoie
Avant l'accès initial, ces déclarations modernes seront mal comprises. La spécification ECMAScript fait référence à ce comportement comme une «sémantique de région morte temporaire», mais je l'appelle «JavaScript nous rend honnêtes».

un exemple légèrement difficile

let const Qu'est-il arrivé à voir ici? La déclaration fonctionnelle a été améliorée, nous pouvons donc l'appeler à l'avance. Mais qu'en est-il de ? Il reste à sa place. C'est pourquoi visiter var nous donnera undefined, et nous essayons de le lire avant que le script ne soit prêt.

Le piège de la déclaration de réclamation

<code class="language-javascript">function setupEventHandler() {
  handleClick(); // 可运行!

  const config = {
    debug: true,
  };

  function handleClick() {
    if (config?.debug) {
      // 未定义!
      console.log("Debug mode");
    }
  }
}

setupEventHandler();</code>
La façon d'améliorer la classe n'est pas la même.

handleClick config Bien que la classe soit améliorée, ils sont toujours dans la "zone morte temporaire" avant que leurs définitions ne soient évaluées. Cela signifie que vous ne pouvez pas y accéder avant de les déclarer. handleClick config undefined N'oubliez pas que la déclaration a été déplacée en haut, mais l'initialisation est restée inchangée.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn