JavaScript에는 범위 (스코프), 스코프 체인 (스코프 체인), 실행 컨텍스트 (실행 컨텍스트), 활성 객체 (활성 객체), 동적 스코프 (동적 범위) 및 클로저 (폐쇄)와 같은 개념이 포함됩니다. 이러한 개념을 이해하기 위해 정적 및 동적 측면에서 분석합니다.
먼저 예를 들어 간단한 기능을 작성하겠습니다.
코드 사본은 다음과 같습니다.
함수 추가 (num1, num2) {
var sum = num1 + num2;
반환 합계;
}
두 가지 공식 매개 변수로 추가 함수를 정의합니다.
정적 측면 :
추가 기능을 만들 때 JavaScript 엔진은 추가 기능의 범위 체인을 생성 하고이 스코프 체인은 전역 컨텍스트를 가리 킵니다. 그래픽 표현을 사용하는 경우 다음 그림이 표시됩니다.
위 그림에서 볼 수 있듯이, 추가 함수가 생성되면, 스코프 체인이 생성되었으므로, 동적 실행 기간이 아닌 함수가 생성 될 때 함수의 스코프 체인이 생성된다는 결론을 도출 할 수 있습니다. 다이나믹 실행 중에 무슨 일이 일어나는지 살펴 보겠습니다.
동적 측면 :
ADD 함수를 실행할 때 JavaScript는 추가 함수의 런타임 중에 필요한 모든 정보가 포함 된 실행 컨텍스트를 생성합니다. 컨텍스트 실행에는 자체 스코프 체인도 있습니다. 함수가 실행될 때 JavaScript 엔진은 먼저 추가 기능의 스코프 체인에서 실행 컨텍스트의 스코프 체인을 초기화 한 다음 JavaScript 엔진은 함수 런타임 동안 모든 로컬 변수, 매개 변수 및 기타 변수를 포함하는 활성 객체를 생성합니다.
이미지가 설명되면 추가 기능의 동적 런타임 중에 발생하는 경우 다음 그림에서 설명 할 수 있습니다.
위 그림에서 볼 수 있듯이 실행 컨텍스트는 역동적 인 개념입니다. 함수가 실행될 때 생성됩니다. 동시에 활성 객체 객체도 동적 개념입니다. 실행 컨텍스트의 스코프 체인에 의해 참조됩니다. 따라서 실행 컨텍스트와 활성 객체는 동적 개념이며 실행 컨텍스트의 범위 체인은 함수 스코프 체인에 의해 초기화된다는 결론을 내릴 수 있습니다.
위의 내용은 함수 범위 및 실행 컨텍스트의 범위에 대해 이야기합니다. 동적 범위의 문제에 대해 이야기합시다. JavaScript가 문, Try-Catch Catch Clauses 및 Eval Methods와 함께 통과하면 JavaScript 엔진은 실행 컨텍스트의 범위를 동적으로 변경합니다. 예를 들어 보자.
코드 사본은 다음과 같습니다.
함수 initUi () {
(문서) {// 피하기!
var bd = body,
links = getElementsByTagName ( "A"),
i = 0,
len = links.length;
while (i <len) {
업데이트 (링크 [i ++]);
}
getElementById ( "go-btn"). onclick = function () {
시작();
};
bd.classname = "Active";
}
위의 initui 함수를 실행할 때 JavaScript는 with 명령문에 해당하는 해당 범위를 동적으로 생성하여 실행 컨텍스트 스코프 체인의 프론트 엔드에 배치합니다. 위의 프로세스는 아래 그림을 통해 생생하게 설명 할 수 있습니다. 아래의 빨간색으로 표시된 영역은 with 문에 의해 생성 된 범위를 보여줍니다.
마지막으로, JavaScript에서 가장 신비로운 폐쇄를 살펴 보겠습니다. 클로저는 실제로 JavaScript의 함수입니다. 클로저는 기능 런타임 중에 생성됩니다. 예를 들어 보겠습니다.
코드 사본은 다음과 같습니다.
함수 antadeEvents () {
var id = "XDI9592";
document.getElementById ( "save-btn"). onclick = function (event) {
Savedocument (ID);
};
}
위 할당 함수가 실행되면 폐쇄가 생성 되며이 폐쇄는 할당 범위의 ID 변수를 나타냅니다. 기존 프로그래밍 언어에 따라 ID는 스택에 저장된 변수 인 경우. 함수가 실행되면 ID가 사라 지므로 어떻게 다시 참조 할 수 있습니까? 분명히 JavaScript는 여기서 다른 방법을 채택합니다. JavaScript가 폐쇄를 어떻게 구현하는지 살펴 보겠습니다. 할인 벤트 함수를 실행할 때 JavaScript 엔진은 antadivents 함수의 실행 컨텍스트의 범위 체인을 만듭니다. 이 스코프 체인에는 할당이 실행될 때 활성 객체가 포함되어 있습니다. 동시에 JavaScript 엔진은 또한 폐쇄를 생성 할 것이며, 클로저의 스코프 체인은 또한 할당이 실행될 때 활성 객체를 나타냅니다. 이러한 방식으로, 할인 벤트가 실행될 때, 자체 실행 컨텍스트의 스코프 체인은 더 이상 활성 객체를 지칭하지 않지만, 클로저는 여전히 antadivents 런타임에 해당하는 활성 개체를 지칭하며, 이는 JavaScript 내부의 폐쇄 메커니즘을 설명합니다. 다음 그림을 사용하여 위 할당 기능 런타임의 상황을 설명 할 수 있습니다.
위에서 볼 수 있듯이, 할인 벤트 함수가 실행 된 후, wordue.getElementById ( "Save-BTN"). OnClick은 폐쇄를 나타냅니다. 이런 식으로 사용자가 Save-BTN을 클릭하면 폐쇄 실행이 트리거됩니다. 폐쇄가 실행될 때의 상황을 살펴 보겠습니다. 앞에서 언급했듯이 JavaScript의 클로저는 실제로 기능이므로 폐쇄 실행 및 기능 실행 상황이 일관됩니다. 다음 수치는 위의 Onclick 이벤트와 관련된 폐쇄를 생생하게 설명합니다.
위의 그림에서 JavaScript 엔진이 먼저 폐쇄의 실행 컨텍스트를 생성 한 다음 클로저 스코프 체인을 사용하여 클로저의 실행 컨텍스트 범위 체인을 초기화하고 마지막으로 클로저가 범위의 전면 끝에서 실행될 때 해당 활성 객체를 넣습니다.