Zrozumienie Globalne & Local Scope w JavaScript

Question

Uczę Javascript użyciu Object-Oriented JavaScript by Stoyan Stefanov

oferuje on przykład porównując globalny i lokalny zakres:

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

Patrząc na ten przykład, spodziewałem pierwszego wpisu do być "123", a drugi wpis "1". I oto, Stoyan mówi:

Można oczekiwać, że pierwszy alert() spowoduje wyświetlenie 123 (wartość zmienna globalna a) i drugi pokaże 1 (lokalna a). Tak nie jest. Pierwszy alert wyświetli "niezdefiniowany". Jest to , ponieważ wewnątrz funkcji zasięg lokalny jest ważniejszy niż zasięg globalny . Tak więc zmienna lokalna zastępuje dowolną zmienną globalną nazwą o tej samej nazwie. W czasie pierwszego alertu() a nie został jeszcze zdefiniowany (stąd wartość niezdefiniowana), ale nadal istniał w przestrzeni lokalnej.

Wyjaśnienie nie było dla mnie jasne, w jaki sposób zmienna lokalna może zastąpić zmienną globalną w pierwszym alarmie? Wszelkie inne/inne wyjaśnienia byłyby mile widziane.

Answer 1

Nie zastępuje zmiennej globalnej. To, co się dzieje, nazywa się "zmiennym podnoszeniem". Oznacza to, że var a; zostanie wstawiony w górnej części funkcji.

Silnik skrypt zmienia swój skrypt być następujące:

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

lekcja: Zawsze deklarować zmiennych przed ich użyciem. Niektórzy powiedzą, że zadeklaruj wszystkie swoje zmienne u góry funkcji.

Answer 2

W prostych słowach wszystkie deklaracje, zarówno zmiennych, jak i funkcji, są traktowane jako pierwsze. Tak więc lokalna var a w efekcie nadpisze globalną zmienną tylko w zasięgu lokalnym i nie będzie miała żadnej wartości, tj. undefined. Pierwszy alert wyświetli undefined. Drugi alert wyświetli 1, tak jak po a = 1. To się dzieje lokalnie, a zmienna globalna ma wartość 123 - nie zostanie zmieniona.

kolejny przykład za pomocą funkcji, aby pokazać jak to działa

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

function f() { 

    show(); 

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

    show(); 

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

} 
f(); 
show();