entendimiento global y alcance local en Javascript

Question

He estado aprendiendo Javascript usando Object-Oriented JavaScript by Stoyan Stefanov

Se ofrece un ejemplo comparando el alcance global y local:

var a = 123; 
function f() { 
    alert(a); 
    var a = 1; 
    alert(a); 
} 
f(); 

En cuanto a este ejemplo, me espera a la primera alerta ser '123' y la segunda alerta ser '1'. He aquí que, Stoyan dice:

se podría esperar que la primera alerta() mostrará 123 (el valor de la variable global a) y el segundo mostrará 1 (lo local a). Este no es el caso. La primera alerta mostrará "indefinido". Esto es porque dentro de la función el alcance local es más importante que el alcance global . Entonces una variable local sobrescribe cualquier variable global con con el mismo nombre. En el momento de la primera alerta() a aún no se había definido (de ahí el valor indefinido) pero aún existía en el espacio local.

La explicación no era clara para mí, ¿cómo puede la variable local sobrescribir la variable global en la primera alerta? Cualquier otra/diferente explicación sería apreciada.

Answer 1

No está anulando la variable global. Lo que está sucediendo se llama "elevación variable". Es decir, se inserta un var a; en la parte superior de la función.

El motor de secuencia de comandos cambia la secuencia de comandos a ser las siguientes:

var a = 123; 
function f() { 
    var a; 
    alert(a); 
    a = 1; 
    alert(a); 
} 
f(); 

enseñanza para aprender: Siempre declarar las variables antes de usarlas. Algunos dirán declarar todas tus variables en la parte superior de la función.

Answer 2

En palabras simples, todas las declaraciones, tanto de variables como de funciones se consideran primero. Por lo tanto, el var a local prevalecerá sobre la variable global solo en el ámbito local y no tendrá ningún valor, es decir, undefined. Entonces la primera alerta mostrará undefined. La segunda alerta mostrará 1 como está después de a = 1. Esto simplemente sucede localmente y la variable global a tendrá el valor 123, no se cambiará.

otro ejemplo utilizando la función para demostrar cómo funciona

function show(){ 
    alert("I am global"); 
} 

function f() { 

    show(); 

    show = function(){ 
     alert("I am second"); 
    } 

    show(); 

    function show(){ 
     alert("I am first"); 
    } 

} 
f(); 
show();