Pourquoi ce code JavaScript alerte-t-il « 1 » au lieu de « 10 » ?

Comprendre le levage et la portée de JavaScript à travers un exemple intrigant

Dans un article récent, Ben Cherry met en lumière les concepts intrigants de levage et de portée de JavaScript . Pour illustrer, il présente le code suivant :

var a = 1;

function b() {
    a = 10;
    return;

    function a() {}
}
b();
alert(a);

Attente vs. Réalité

Intuitivement, on pourrait s'attendre à ce que l'alerte affiche "10" car la fonction a est déclaré dans b. Cependant, le navigateur affiche « 1 » à la place.

Exploration du levage et de la portée

Le levage est un phénomène dans lequel les fonctions sont déplacées vers le haut de leur portée. Cela signifie que le code suivant est réécrit par l'interpréteur :

function b() {
  a = 10;
  return;
  function a() {}
}

Fait intéressant, JavaScript permet également la déclaration de variables dans les fonctions en utilisant la syntaxe function a() {}. Ceci équivaut à var a = function () {};.

Comprendre la séquence d'exécution

Le code fonctionne essentiellement comme suit :

• a est défini dans la portée globale avec la valeur 1.
• La fonction b est déclarée et hissé.
• À l'intérieur de b, une variable a est déclarée dans la portée locale en utilisant la fonction a() {} (équivalent à var a = function () {};). Cela crée une instance distincte de a.
• a est ensuite écrasé dans la portée locale avec la valeur 10.
• b revient et l'instance locale de a sort de la portée.
• alert(a) accède à la variable globale a, qui contient toujours la valeur 1.

Par conséquent, l'alerte affiche "1" à la place de "10" car la variable globale a n'est pas affectée par les modifications apportées à la variable locale a dans la fonction.

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!