> 웹 프론트엔드 > 프런트엔드 Q&A > JavaScript 범위의 두 가지 범주는 무엇입니까?

JavaScript 범위의 두 가지 범주는 무엇입니까?

青灯夜游
풀어 주다: 2023-01-07 11:43:58
원래의
2870명이 탐색했습니다.

JavaScript 범위는 전역 범위와 로컬 범위의 두 가지 범주로 나뉩니다. 변수는 함수 외부의 전역 변수로 정의되며 전역 변수는 전역 범위를 갖습니다. 즉, 웹 페이지의 모든 스크립트와 함수는 함수 내부에서 로컬 범위로 선언되며 로컬 범위는 일반적으로 고정 코드 조각(예: 함수)은 내부적으로 액세스할 수 있습니다.

JavaScript 범위의 두 가지 범주는 무엇입니까?

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

변수 범위란 스크립트 코드에서 변수의 유효한 읽기 및 쓰기 가능 범위, 즉 스크립트 코드에서 변수를 사용할 수 있는 영역을 의미합니다.

변수의 범위는 크게 전역 범위와 로컬 범위(함수 범위라고도 함)의 두 가지 유형으로 나뉩니다.

해당 범위의 변수를 각각 전역변수, 지역변수라고 합니다. 전역 변수는 모든 함수 외부에서 선언됩니다. 지역 변수는 함수 본문 내에서 선언된 변수이거나 함수의 명명된 매개 변수입니다.

전역 범위

변수는 함수 외부의 전역 변수로 정의됩니다. 전역 변수는 전역 범위를 갖습니다. 웹 페이지의 모든 스크립트와 함수를 사용할 수 있습니다.

코드의 어느 곳에서나 액세스할 수 있는 개체에는 전역 범위가 있습니다. 일반적으로 다음 상황에 전역 범위가 있습니다.

 1. 가장 바깥쪽 함수와 외부에 정의된 변수에는 전역 범위가 있습니다.

 2. 모든 변수는 전역 범위를 갖습니다. 정의되지 않고 직접 할당된 항목은 자동으로 전역 범위를 갖도록 선언됩니다

 3. 창 개체의 모든 속성에는 전역 범위가 있습니다

일반적으로 창 개체의 내장 속성에는 전역 범위가 있습니다. 예를 들어 window.name입니다. , window.location, window.top 등

로컬 범위

변수는 함수 내에서 로컬 범위로 선언됩니다.

전역 범위와 달리 로컬 범위는 일반적으로 고정된 코드 조각(예: 함수) 내에서만 액세스할 수 있으며 가장 일반적인 범위는 함수 내부에 있으므로 어떤 곳에서는 사람들이 이 범위를 다음과 같이 참조하는 것을 볼 수 있습니다. 함수 범위입니다.

간단히 말하면 JS 파서가 실행되면 먼저 실행 환경에서 전역 개체를 빌드합니다. 우리가 정의한 전역 속성은 최상위 코드에서 this 키워드를 사용하고 창 개체가 액세스할 수 있습니다.

함수 본문의 지역 변수는 함수가 실행될 때 생성된 호출 개체에만 존재합니다. 지역 변수는 함수가 실행되는 즉시 소멸됩니다.

따라서 프로그래밍에서는 변수를 합리적으로 선언하는 방법을 고려해야 합니다. 이렇게 하면 불필요한 메모리 오버헤드를 줄일 수 있을 뿐만 아니라 변수를 반복적으로 정의하고 이전에 정의한 변수를 덮어써서 발생하는 디버깅 문제를 크게 피할 수 있습니다.

설명:

변수의 범위는 선언 방법과 밀접한 관련이 있습니다. var를 사용하여 선언된 변수에는 전역 범위와 함수 범위가 있으며, let 및 const를 사용하여 선언된 변수에는 전역 범위와 로컬 범위가 있습니다.

참고: 엄밀한 의미에서 전역 변수는 창 개체의 속성에 속하지만, let 및 const로 선언된 변수는 창 개체에 속하지 않으므로 엄밀한 의미에서는 전역 변수가 아닙니다. 해당 범위를 참조하십시오. 이 관점에서 볼 때 이들은 전역 변수입니다.

var는 변수 승격을 지원하므로 var 변수의 전역 범위는 전체 페이지의 스크립트 코드에 유효하지만 let 및 const는 변수 승격을 지원하지 않으므로 let 및 const 변수의 전역 범위는 선언을 참조합니다. 전체 페이지의 스크립트 코드 끝 부분과 선언문 앞 부분 사이의 전체 영역은 유효하지 않습니다.

마찬가지로 var는 변수 승격을 지원하지만 let과 const는 변수 승격을 지원하지 않기 때문에 var를 사용하여 선언한 지역 변수는 함수 전체에서 유효하지만, let과 const를 사용하여 선언한 지역 변수는 선언문 시작 부분부터 끝까지 유효합니다. 기능 영역의 끝이 유효합니다. 지역 변수와 전역 변수의 이름이 같으면 함수 범위에서 지역 변수가 전역 변수를 덮어씁니다. 즉, 지역 변수는 함수 본문 외부에서 작동합니다. 전역 변수는 작동하고, 지역 변수는 작동합니다. 변수가 유효하지 않으며, 지역 변수를 참조할 때 구문 오류가 발생합니다.

예: 변수 범위

     var v1 = "JavaScript"; //全局变量
     let v2 = "JScript"; //全局变量
     let v3 = "Script"; //全局变量
     scopeTest();    //调用函数
     function scopeTest(){
         var lv = "aaa"; //局部变量
         var v1 = "bbb"; //局部变量
         let v2 = "ccc"; //局部变量

         console.log("函数体内输出的lv = " + lv); //aaa
         console.log("函数体内输出的v1 = " + v1); //bbb
         console.log("函数体内输出的v2 = " + v2); //ccc
         console.log("函数体内输出的v3 = " + v3); //Script
         //v4为全局变量,赋值在后面,因而值为undefined
         console.log("函数体内输出的v4 = " + v4);
     }
     var v4 = "VBScript"; //全局变量
     console.log("函数体外输出的lv = " + lv); //① 报ReferenceError错误
     console.log("函数体外输出的v1 = " + v1); //JavaScript
     console.log("函数体外输出的v2 = " + v2); //JScript
     console.log("函数体外输出的v3 = " + v3); //Script
     console.log("函数体外输出的v3 = " + v4); //VBScript
로그인 후 복사

위 스크립트 코드에서는 각각 4개의 전역 변수와 3개의 지역 변수를 선언합니다. scopeTest 함수 외부의 변수 v1, v2, v3 및 v4는scopeTest 함수 본문 내부의 전역 변수이고 lv 및 v2는 전역 변수입니다.

지역 변수 v1 및 v2가 전역 변수 v1 및 v2와 동일한 이름을 갖는 것을 볼 수 있습니다.scopeTest 함수 본문에서 지역 변수 v1 및 v2는 유효하므로 함수 본문에서 이 두 변수의 출력 결과는 "bbb"입니다. " 및 "ccc" 각각. "; 함수 본문 외부에서는 전역 변수 v1 및 v2가 유효하므로 함수 본문 외부에서는 이 두 변수의 출력 결과가 각각 "JavaScript" 및 "JScript"입니다.

또한 전역 변수 v3, v4는 함수 몸체에 덮어쓰이지 않아 전역 변수의 값이 출력되므로 함수 몸체 내부와 외부의 v3 출력 결과는 "Script"이고, v4 변수는 함수 호출에 있습니다. 나중에 함수 본문에서 v4의 출력 결과는 "정의되지 않음"인 반면 함수 본문 외부의 출력은 선언 이후이므로 결과는 "VBScript"입니다. lv는 지역 변수이므로 함수 외부에서 이 변수에 액세스하면 "ReferenceError" 오류가 보고됩니다.

위 코드를 크롬 브라우저에서 실행한 후, 브라우저의 콘솔을 열면 아래 그림과 같이 출력되는 것을 확인할 수 있습니다

JavaScript 범위의 두 가지 범주는 무엇입니까?

위 그림에 표시된 코드의 18번째 줄(즉, 댓글 예 ① 코드) lv가 정의되지 않음 참조 오류 이는 lv 변수가 지역 변수이므로 함수를 종료한 후에는 유효하지 않기 때문입니다. 이 코드 줄을 주석 처리한 후 실행하면, 이때 브라우저 콘솔을 열면 아래 그림과 같은 결과가 표시됩니다

JavaScript 범위의 두 가지 범주는 무엇입니까?

[권장 학습: javascript 고급 튜토리얼]

위 내용은 JavaScript 범위의 두 가지 범주는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿