JavaScript의 변수 범위에 대해 배우기 전에 몇 가지 사항을 명확히 해야 합니다.
•JavaScript의 변수 범위는 고유한 범위 체인을 기반으로 합니다.
•JavaScript에는 블록 수준 범위가 없습니다.
•함수에서 선언된 변수는 함수 전체에 걸쳐 정의됩니다.
1. 자바스크립트 범위 체인
먼저 다음 코드를 살펴보세요.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> var rain = 1; function rainman(){ var man = 2; var innerVar = 4; 내부 함수 호출 } rainman(); //rainman 함수 호출</script>
경고(비); 코드를 관찰하세요. JavaScript는 먼저 내부 함수에 rain 변수가 정의되어 있는지 확인합니다. 정의된 경우 내부 함수에 rain 변수가 사용됩니다. rain 변수가 내부 함수에 정의되어 있지 않으면 JavaScript는 계속해서 rain 변수를 확인합니다. 이 코드에서는 rainman 함수 본문에 rain 변수가 정의되어 있지 않으므로 JavaScript 엔진은 계속해서 rainman 함수가 정의되어 있는지 확인합니다. 비 = 1로 정의되었으므로 최종 결과는 '1'로 표시됩니다.
범위 체인: JavaScript가 변수 x를 쿼리해야 하는 경우 먼저 범위 체인의 첫 번째 개체를 검색합니다. 첫 번째 개체가 정의가 없으면 검색이 계속됩니다.
위의 코드에는 inner, rainman 및 window의 세 가지 범위 체인 개체가 순서대로 포함됩니다.
2. 함수 본문 내에서 지역 변수는 동일한 이름을 가진 전역 변수보다 우선순위가 높습니다.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> var rain = 1; //전역 변수 rain 정의 function check(){ var rain = 100; //지역 변수 rain 정의 //100이 나타납니다. here } check (); //1이 여기에 나타납니다.</script>
3. JavaScript에는 블록 수준 범위가 없습니다.
이는 자바스크립트가 다른 언어에 비해 유연한 부분이기도 합니다.
아래 코드를 주의 깊게 관찰하면 변수 i, j, k의 범위가 동일하고 전체 rain 함수 본문에서 전역적이라는 것을 알 수 있습니다.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> function rainman(){ // rainman 함수 본문에는 3개의 지역 변수 ijk가 있습니다. var i = 0; if ( 1 ) { var j = 0 for(var k = 0; k < 3; k++) { 경고( k ); // 각각 0 1 2 팝업 } Alert( k ); // 0 팝업 }</script>
4. 함수에 선언된 변수는 함수 전반에 걸쳐 정의됩니다.
먼저 다음 코드를 살펴보세요.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> function rain(){ var x = 1; function man(){ x = 100 } man(); //여기에 call man이 나타납니다. } rain(); //비 호출</script>
위의 코드는 변수 x가 rain 함수 본문 전체에서 사용될 수 있고 재할당될 수 있음을 보여줍니다. 이 규칙으로 인해 "믿을 수 없는" 결과가 생성됩니다. 아래 코드를 준수하십시오.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> var x = 1; function rain(){ 경고( x ); //1 대신 '정의되지 않은' 팝업 표시 var x = 'rain-man'; /pop '레인맨' } rain();</script>
이는 rain 함수의 지역 변수 x가 함수 본문 전체에 걸쳐 정의되어(var x= 'rain-man', 선언됨), 동일한 이름의 전역 변수 x가 rain 함수 본문 전체에 숨겨져 있기 때문입니다. 여기서 '정의되지 않음'이 나타나는 이유는 처음으로 Alert(x)를 실행할 때 지역 변수 x가 아직 초기화되지 않았기 때문입니다.
따라서 위의 rain 함수는 다음 함수와 동일합니다.
다음과 같이 코드 코드를 복사합니다.
function rain(){ var x; 경고( x ); x = '레인맨';}
5. var 키워드를 사용하지 않고 정의된 변수는 전역 변수입니다.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> function rain(){ x = 100; //전역 변수 x가 선언되고 할당됩니다.} rain(); //100이 나타납니다.
이는 JavaScript 초보자들이 흔히 저지르는 실수이기도 합니다. 의도치 않게 많은 전역 변수를 남겨두는 것입니다.
6. 전역 변수는 모두 창 개체의 속성입니다.
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> var x = 100; 경고(window.x);//팝업 100 경고(x);</script>
다음 코드와 동일
다음과 같이 코드 코드를 복사합니다.
<script type="text/javascript"> window.x = 100; 경고(window.x)</script>