JavaScript 고급 어휘 범위 및 범위 체인에 대한 심층적인 이해_기본 지식

주요 내용:
1. JavaScript 어휘 범위의 의미 분석

2. 변수의 범위 체인을 구문 분석합니다

3. 변수 이름이 승격되면 어떻게 되나요?

최근 Chuanzhi 팟캐스트에서 JavaScript 강좌를 설명하던 중 많은 친구들이 JavaScript가 너무 간단하지만 사용법을 모른다고 생각하여 여러분과 공유할 콘텐츠를 준비했습니다.
이번 시리즈는 주로 다음과 같습니다. JavaScript의 고급 부분에는 범위 체인, 클로저, 함수 호출 패턴, 프로토타입 및 객체 지향 사항이 포함됩니다. JavaScript의 기본 구문은 여기에 포함되어 있지 않습니다. 기본 사항을 알아야 하는 경우 학생들은 http://net을 방문할 수 있습니다. . 학습용 무료 동영상을 다운로드하려면 itcast.cn으로 이동하세요. 자, 이제 바로 주제로 넘어가겠습니다.

1. 블록 수준 범위에 대하여
자바스크립트 변수 범위는 우리가 일반적으로 사용하는 C 계열 언어와 다릅니다. 예를 들어 C#에서는 다음 코드를 사용합니다.

코드 복사 코드는 다음과 같습니다.

static void Main(string[] args)

{
if(true)
{
int num = 10;
}
System.Console.WriteLine(num);
}

이 코드를 컴파일하면 "num이라는 이름이 현재 컨텍스트에 존재하지 않기 때문에" 통과되지 않습니다. 여기서 변수의 범위는 중괄호로 제한되므로 블록 수준 범위라고 합니다. .

블록 수준 범위에서는 모든 변수가 정의의 중괄호 안에 있습니다. 정의 시작 부분부터 중괄호 끝 부분까지의

범위 내에서 사용할 수 있습니다. 즉, 코드는

코드 복사 코드는 다음과 같습니다.

if(true)

{
int num = 10;
System.Console.WriteLine(num);
}

변수 정의와 사용이 동일한 중괄호 안에 있기 때문에 여기서 접근할 수 있습니다.

하지만 JavaScript에서는 다릅니다.

2. JavaScript의 범위
JavaScript의 경우 다음 코드는

코드 복사 코드는 다음과 같습니다.

if(true) {

var 숫자 = 10 ;
}
경고(숫자);

작업 결과는 팝업창입니다. 10. 그렇다면 JavaScript에서는 변수의 범위가 어떻게 제한되나요?

2.1 함수가 변수 범위를 제한합니다

JavaScript에서는 함수만 변수의 범위를 제한할 수 있다는 것이 무슨 뜻인가요?
즉, JavaScript에서 함수 내에 정의된 변수는 함수 내에서 액세스할 수 있지만 은 함수 외부에서 액세스할 수 없습니다.

코드 복사 코드는 다음과 같습니다.

var func = function() {

var num = 10;
};
try {
alert(num);
} catch(e) {
alert(e);
}

이 코드를 실행하면 예외가 발생합니다. 즉, 함수에 정의된 변수는 함수 내에서 자유롭게 사용할 수 있습니다. 값을 할당하기 전에 다음 코드를 보세요.

코드를 복사하세요. 코드는 다음과 같습니다.

var func = function( ) {

경고(숫자);
var num = 10;
경고(숫자);
};
시도 {
func();
} catch( e ) {
Alert( e );
}

이 코드를 실행한 후에는 오류가 발생하지 않습니다. 정의되지 않은 창과 10번 창이 나타납니다(이유는 아래에 설명되어 있음). 여기에서 볼 수 있듯이 변수는 함수 내에서만 접근할 수 있습니다. 마찬가지로 이 함수 내의 함수에도 접근할 수 있습니다.

2.2 하위 도메인이 상위 도메인에 액세스

앞서 언급했듯이 함수는 변수의 범위를 제한할 수 있으며, 그러면 함수의 함수는 범위의 하위 도메인이 됩니다. 도메인의 하위 코드는 상위 도메인의 변수에 액세스할 수 있습니다.
코드를 참조하세요.

코드 복사 코드는 다음과 같습니다.var func = function() {

var num = 10;

var sub_func = function() {
Alert(num);
};
sub_func();
};
func();

이 코드를 실행한 결과는 10입니다. 위에서 언급한 변수 액세스 상황을 볼 수 있습니다. 그러나 하위 도메인의
코드에 대한 액세스도 다음 코드와 같이 조건부입니다. 🎜>

코드 복사 코드는 다음과 같습니다.

var func = function() {
var num = 10;
var sub_func = function() {
var num = 20;
Alert(num);
};
sub_func();
};
펑크()

이 코드에는 이전 코드보다 "var num = 20;"이 하나 더 있습니다. 이 코드는 하위 도메인에 있으므로 상위 도메인에 액세스하는 하위 도메인의 상황이

변경되었습니다. 결과는 20입니다. 즉, 이때 하위 도메인에서 접근한 num은 상위 도메인이 아닌 하위 도메인의 변수입니다.
JavaScript에서 변수를 사용할 때 JavaScript 해석기는 먼저 현재

범위에서 변수 정의를 검색하는 경우 이 변수가 사용됩니다. 상위 도메인에서 변수를 찾으세요.

그리고 계속해서 최상위 범위를 찾을 수 없을 때까지 "변수가 정의되지 않았습니다"라는 예외가 발생합니다.

코드 복사 코드는 다음과 같습니다.

(function() {

var num = 10;
(function() {
var num = 20;
(function(){
Alert(num);
})()
})();
})();

이 코드를 실행하면 20이 인쇄됩니다. "var num = 20;"을 제거하면 10이 인쇄됩니다. 마찬가지로 "var num = 10"을 제거하면 undefine 오류가 나타납니다. .

3. 스코프 체인
자바스크립트의 스코프를 분할하면 자바스크립트의 스코프 체인이 연결되어 트리 구조로 연결될 수 있습니다. 명확하게 이해할 수 있다면 JavaScript의 변수와 클로저가 매우 명확해질 것입니다. 다음은 그리기 방법을 사용하여 범위 체인을 그립니다.
3.1 그리기 규칙:

1) 범위 체인은 객체의 배열입니다

2) 모든 스크립트는 레벨 0 체인이며 각 객체는 위치를 차지합니다3) 언제든지 함수가 체인을 확장할 때 레벨별로 확장하세요
4) 접근 시 현재 함수를 먼저 살펴보고 정의되어 있지 않은 경우 상위 레벨 체인을 확인하세요5) 레벨까지 반복합니다. 0체인


3.2 예시

다음 코드를 보세요:

코드 복사

코드는 다음과 같습니다.var num = 10;var func1 = 함수() {

var num = 20;

var func2 = function() {
var num = 30;
Alert(num);
};
func2( );
};
var func2 = function() {
var num = 20;
var func3 = function() {
Alert(num);
};
func3( );
};
func1();
func2();



이 코드를 분석해 보겠습니다.
-> 우선 전체 코드는 레벨 0 범위 체인으로 표시될 수 있는 전역 범위입니다. 그 다음에는

var link_0 = [num]이 있습니다. , func1 , func2 ];// 여기에 설명하려면 의사 코드를 사용하세요 -> 여기서 func1과 func2는 모두 함수이므로 두 개의 레벨 1 범위 체인이 각각 파생됩니다.

var link_1 = { func1: [ num, func2 ] };// 여기에 설명하려면 의사 코드를 사용하세요
var link_1 = { func2: [ num, func3 ] };// 여기에 설명하려면 의사 코드를 사용하세요
-> Chain
var link_2 = { func2: [ num ] };//
을 설명하기 위해 의사 코드를 사용합니다. -> 두 번째 레벨 1 체인은 정의된 변수가 없고 빈 체인이므로 var link_2 = { func3: [ ] };
-> 위 코드를 통합하면 다음과 같이 스코프 체인을 표현할 수 있습니다.




코드 복사

코드는 다음과 같습니다.// 의사 코드로 설명합니다.var link = [ // Level 0 chain num,

{ func1 : [ // 첫 번째 레벨 1 체인

num,
{ func2 : [ // 레벨 2 체인
num
] }
]},
{ func2 : [ / / 첫 번째 레벨 체인 레벨 1 체인 2개
num,
{ func3 : [] }
]}
];

-> 이미지로

로 표현

사진: 01_01 스코프체인.bmp

참고: js 코드를 사용하여 체인 다이어그램을 표현하면 강조 표시되면 매우 명확해집니다.

이 스코프 체인 다이어그램을 사용하면 변수에 액세스하는 방법을 명확하게 이해할 수 있습니다.
변수를 사용해야 할 경우 먼저 현재 체인에서 변수를 찾고, 찾으면 직접 사용하세요. .
다시 검색하지 않으며, 찾지 못한 경우에는 0레벨 범위 체인까지 검색합니다.

변수가 속하는 스코프 체인의 수준을 명확하게 결정할 수 있다면 JavaScript
코드를 분석하고 클로저와 같은 고급 JavaScript 기능을 사용할 때 매우 쉬울 것입니다(적어도 나에게는).

3. 변수명 승격 및 함수명 승격

스코프 체인과 변수 액세스 규칙에는 매우 까다로운 문제가 있습니다. 먼저 아래

의 JavaScript 코드를 살펴보세요.

코드 복사 코드는 다음과 같습니다.

var num = 10;
var func = 함수() {
경고(숫자);
var num = 20;
경고(숫자);
};
func();

실행 결과는 어떻게 될까요? 생각해 보세요. 아직 답은 공개하지 않겠습니다.

먼저 이 코드를 분석해 보겠습니다.

이 코드에는 num 및 func 멤버가 있는 레벨 0 범위 체인이 있습니다. func 함수가 호출되면
변수 num이 현재 범위에 정의되어 있으므로 이 변수가 사용되는 것으로 감지됩니다. 그러나
코드가 다음과 같기 때문에 이때 num에는 값이 할당되지 않습니다. 위에서 아래로 실행되므로 첫 번째 인쇄는 정의되지 않고 두 번째 인쇄는 20입니다.
답을 맞히셨나요?

이런 코드를 뒤에서 정의하고 이를 앞에서 사용하는 것도 자바스크립트에서 흔히 발생하는

문제입니다. 이때 변수를 처음에 정의한 것처럼 결과는 이렇습니다. 다음 코드:

코드 복사 코드는 다음과 같습니다.

var num = 10;

var func = function() {
var num; // 여기에 정의된 것 같지만 할당이 없습니다.
Alert(num);
var num = 20;
경고(숫자);
};
func();

그러면 이 현상을 흔히 변수 이름 승격이라고 합니다. 예를 들어 다음 코드는

코드 복사입니다. 코드는 다음과 같습니다.

var func = function() {

Alert("외부 함수 호출");
};
var foo = function( ) {
func();

var func = function() {
Alert("내부 함수 호출");
};

func();
};

그럼 이 코드의 결과는 무엇인가요? 아니면 뭔가 다른게 있을텐데, 독자들에게 생각을 맡기지 않겠습니다. 다음 글에서 답변해드리겠습니다

.
이러한 차이로 인해 실제 개발 시에는 모든 변수를 처음에 작성하는 것이 좋습니다.

즉, 변수는 C언어의 규정과 유사하게 함수 시작 부분에 정의됩니다. jQuery 등과 같은 js 라이브러리

에서도 수행됩니다.

4. 요약 자, 이번 글에서는 주로 JavaScript의 어휘 범위가 무엇인지 설명하고,

범위 체인과 변수 액세스를 분석하는 방법을 설명합니다. 마지막으로 한 가지 연습으로 마무리하겠습니다. ! !

다음 코드를 실행한 결과를 보세요.

코드를 복사하세요. 코드는 다음과 같습니다.

if ( ! "a" in window ) {

var a = "변수 정의";
}
alert(a);