w3schools tag tab style page for color javascript hoisting

javascript - tag - title of page html



JavaScript ''izando'' (5)

Esta pregunta ya tiene una respuesta aquí:

Encontré JavaScript ''hoisting'' y no descubrí cómo funciona realmente este fragmento de código:

var a = 1; function b() { a = 10; return; function a() {} } b(); alert(a);

Sé que la declaración de funciones como ( function a() {} ) se elevará a la parte superior del alcance de la función b pero no debe anular el valor de a (porque las declaraciones de funciones anulan las declaraciones de variables pero no la inicialización de variables) entonces se espera que el valor de la alerta sea 10 en lugar de 1 !!


(1) JavaScript no tiene alcance de instrucción de bloque; más bien, será local al código en el que reside el bloque.

(2) La declaración de variables de Javascript en un alcance de función, lo que significa que las variables declaradas en una función están disponibles en cualquier parte de esa función, incluso antes de que se les asigne un valor .

(3) Dentro del cuerpo de una función, una variable local tiene prioridad sobre una variable global con el mismo nombre. Si declara una variable local o un parámetro de función con el mismo nombre que una variable global, efectivamente oculta la variable global .

tu código es el mismo que: ( leer comentario )

<script> var a = 1; //global a = 1 function b() { a = 10; var a = 20; //local a = 20 } b(); alert(a); //global a = 1 </script>

referencia:
(1) Alcance de variable de JavaScript:
(2) Un ejemplo peligroso de elevación de Javascript
(3) Alcance variable

Entonces en tu código:

var a = 1; //global a = 1 function b() { a = 10; return; function a() {} //local } b(); alert(a); //global a = 1


  1. El global a está configurado en 1
  2. Se llama b()
  3. function a() {} se iza y crea una variable local a que enmascara el global a
  4. El a local se establece en 10 (sobrescribiendo la función a )
  5. Se alerta a la global a (todavía 1 )

  1. la función de declaración de function a(){} se iza primero, por lo tanto, en el ámbito local se crea a.
  2. Si tiene dos variables con el mismo nombre (una en global y otra en local), la variable local siempre tiene precedencia sobre la variable global.
  3. Cuando establece a=10 , está configurando la variable local a , no la global.

Por lo tanto, el valor de la variable global sigue siendo el mismo y se obtiene, alertado 1


Cuando leí el mismo artículo sobre JavaScript Scoping and Hoisting , también me confundí porque el autor nunca mostró los dos códigos de ejemplo de apertura que se interpretan en el compilador.

Aquí está el ejemplo que proporcionó, y el segundo en la página:

var a = 1; function b() { function a() {} // declares ''a'' as a function, which is always local a = 10; return; } b(); alert(a);

y aquí está el primer ejemplo en la página:

var foo = 1; function bar() { var foo; // a new local ''foo'' variable if (!foo) { foo = 10; } alert(foo); } bar();

Espero que esto ayude


Es porque el orden de compilación / interpretación en este ejemplo es algo engañoso. La function a () {} se interpreta antes de que se ejecute el resto de la función, por lo que al comienzo de la función, a tiene el valor de la function a () {} . Cuando lo reasignas a 10 , estás reasignando el valor de a en el ámbito local de la función b() , que luego se descarta una vez que regresas, dejando el valor original de a = 1 en el ámbito global.

Puede verificar esto colocando alert() s alert() o elementos similares en los lugares apropiados para ver cuál es el valor de a en varios puntos.