JavaScript는 범위에서 변수를 어떻게 해석합니까?

Question

나는 자바 스크립트 인터프리터가 작동하는 방법에 대해 조금 의심하고있다. 특히 내가 여기에서 언급하는 경우를 위해. 이 디버거의 범위 섹션 쇼를 칠 때

var a = 5; 
function foo(){ 
debugger 
a = 100; 

if(false){ 
var a = 10; 
} 

a = 1000; 
} 

foo(); 
console.log(a); 

단순히 복사 브라우저의 콘솔에서 위의 코드를 붙여 예상되는 대답은, 그것은 반환 무엇 1000 내가 의도적으로 디버거를 뒀다 5.

입니다 변수 은 정의되지 않은 범위입니다. 따라서 추가 할당은 로컬 변수 a에 대해 수행됩니다. 로컬 변수 a는 거짓 블록에 있으므로 전혀 작성되지 않았습니다.

변수의 범위가 {}에 국한되지는 않지만 함수에 국한된다는 것을 알고 있습니다. 그러나이 경우는 놀라운 일입니다!

누구든지 설명 할 수 있습니까?

Answer 1

코드에 서식을 조금만 지정하십시오.

var a = 5; 
function foo(){ 
    debugger 
    a = 100; 

    if(false){ 
     var a = 10; 
    } 
    a = 1000; 
} 

foo(); 
console.log(a); 

Hoisting은 찾고 계신 키워드입니다. Javascript는 변수를 호이스트합니다. 즉, 실행될 것인지의 여부와 관계없이 지역 변수의 선언을 함수의 최상위에 놓는 것을 의미합니다. 따라서 해석 후에 코드는 다음과 같습니다.

var a = 5; 
function foo(){ 
    var a; 
    debugger 
    a = 100; 

    if(false){ 
     a = 10; 
    } 
    a = 1000; 
} 

foo(); 
console.log(a); 

따라서 함수 내에서 로컬 변수가되므로 함수 내부에서 값이 변경되면 전역 변수가 아닌 로컬 변수 만 변경됩니다. 따라서 콘솔은 전역 변수를 5 번 인쇄하고 그 값은 절대로 변경되지 않습니다.

Answer 2

코드에 var a가 있기 때문입니다. var a = 10처럼 보이더라도 함수의 모든 선언은 맨 위로 올라갑니다. 결코 실행되지 않을 것이다. var를 제거하면 예상대로 작동합니다.

Answer 3

var 선언은 전체 범위를 포함합니다.

function() { 
    var a; 
    a = 5; 
    a = 10; 
} 

그래서 a은 첫 번째 부분에서 세계와 이후 로컬이 아닌 함수의 범위 내에서 지역 변수입니다 :에

function() { 
    a = 5; 
    var a = 10; 
} 

은 동일합니다 (즉, 너무 복잡한 것이!).