Wie der unten JavaScript Scope funktioniert

Question

Ich habe über JavaScript gelesen Bereiche und Hoisting. Ich sah eine Probe wie unten, die einige Zweifel in mir aufkommen ließ. Also habe ich mich gefragt, wie es funktioniert.

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

wird der Code alarmieren! Aber wenn wir die "Funktion a() {}" Teil beseitigen, alarmiert der Code 10.

Also, wie funktioniert es! Was macht die "Funktion a() {}" hier und wie wirkt sie sich auf die Bereiche aus?

Ich kann auch nicht die Bedeutung eines leeren "Rückkehr" verstehen; in diesem Code.

Also, wie funktioniert dieser Code unter Verwendung der JavaScript Scopes?

Answer 1

Als Erstes verlässt eine "leere" return;-Anweisung einfach die Funktion an diesem Punkt und gibt zurück. Es entspricht return undefined;.

Der einfache Fall, wenn Sie den function a(){} Teil beseitigen ist, dass die b() Funktion der globale Variable ändert a10, so dann sein, wenn Sie den Wert a nach dem Ausführen der es 10 ist b() Funktion alarmieren. Ohne diese innere Funktion bedeuten alle Verweise auf a die globale Variable.

Aber mit der function a(){} Teil, wird diese Funktion innerhalbb() erklärt. Es ist lokal zu b(). Dann haben Sie zwei verschiedene a s: die globale Variable und die lokale Variable in b(). Unabhängig davon, wo innerhalb der enthaltenden Funktion eine andere Funktionsanweisung angezeigt wird, wird sie vom JS-Compiler so behandelt, als befände sie sich am Anfang der Funktion. Also auch wenn die function a(){} Linie am Ende der enthaltenden b() Funktion in der Tat ist das, was passiert, wenn der Code ausgeführt werden ist folgende:

var a = 1;    // declare a global variable a 
function b() { 
    function a() {}  // declare a local function a 
    a = 10;    // update local a to be 10 instead of a function 
    return; 
} 
b(); 
alert(a); // show value of global a, which is still 1 

Answer 2

Neben nnnnnn's great answer habe ich versucht, die Situation zu vergegenwärtigen.

Mit function a(){}, verhält sich der Code wie folgt:

scope: window       scope: b 
     |         | 
     | var a = 1; //window.a = 1;  | 
     |         | 
     | function b() { -----------------> | 
     |         | function a(){} // b.a(){} (hoisted to top) 
     |         | a = 10;  // b.a = 10; 
     |         | return; 
     | } <------------------------------ | 
     |         | 
     | b();        | 
     | alert(a); // alert(window.a); | 

Wir können sehen, dass function a(){} an die Spitze der Funktion hochgezogen wird, weil er eine Erklärung enthält. Und wenn wir function a(){} entfernen, verhält sich der Code wie folgt:

scope: window       scope: b 
     |         | 
     | var a = 1; //window.a = 1;  | 
     |         | 
     | function b() { -----------------> | 
     |         | a = 10;  // window.a = 10; 
     |         | return; 
     | } <------------------------------ | 
     |         | 
     | b();        | 
     | alert(a); // alert(window.a); | 

Answer 3

Ihr Code ist funktional gleich zu diesem Code:

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

Mit der function NAME() { ... } Notation setzt effektiv die Funktion Erklärung zu Beginn der aktuelle Geltungsbereich als lokale Deklaration.

in der Tat, wenn Sie

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

ausführen Es wird ausgegeben:

2 
1 

persönlich immer explizit Zuweisungen ich nicht diese Art der Notation, ich.

jsfiddle