>  기사  >  웹 프론트엔드  >  자바스크립트 이해_12_실행 모델에 대한 간략한 분석_자바스크립트 스킬

자바스크립트 이해_12_실행 모델에 대한 간략한 분석_자바스크립트 스킬

WBOY
WBOY원래의
2016-05-16 18:18:091116검색

간단한 시작
간단한 코드:

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

< ; 스크립트 유형="text/javascript" src="xxx.js">




위 코드 조각의 실행 순서는 다음과 같습니다.



코드 복사
코드는 다음과 같습니다. 첫 번째 코드 세그먼트를 읽어보세요step2. 구문 오류(예: 일치하지 않는 괄호 등)가 보고되고 5단계로 이동합니다.
3단계. 전역 실행 환경 만들기(var 변수 및 함수 정의 "준비")
코드 세그먼트 실행(호출 시) 함수를 입력하고 eval을 입력하면 새로운 실행이 생성됩니다. 환경), 오류가 있으면 오류가 보고됩니다(예: 변수가 정의되지 않음)
step5.다른 코드 세그먼트가 있으면 다음 코드 세그먼트를 읽으십시오. 2단계
6단계를 반복합니다.


1단계의 '스크립트 섹션'은 <script>... ...</script> 또한 와 같은 외부에서 도입된 스크립트 파일도 포함합니다. 그렇다면 2단계의 구문 분석은 무엇입니까? 구문 분석에 대한 간단한 이해는 Javascript 코드의 구문 구조가 올바른지 확인하는 것입니다. 예:



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


당연히 코드가 구문 분석을 통과하지 못합니다. if 조건문의 입력 구문이 잘못되었습니다. 3단계와 4단계의 '실행 환경'은 무엇을 의미하나요? 함수를 호출하여 생성된 환경? 실행 환경 내부 프로세스는 무엇인가?...

참고: 다음 부분은 원문 "Javascript Speed ​​​Up_01_Reference Variable Optimization"의 처음 두 섹션의 전체 버전입니다. "
<.>실행 컨텍스트에 대하여
모든 JavaScript 코드는 실행 환경에서 실행됩니다. JavaScript 런타임 범위, 수명 등의 처리를 완료하는 데 사용되는 개념이자 메커니즘입니다.

실행 가능한 JavaScript 코드에는 세 가지 유형이 있습니다.
1. 글로벌 코드는 js 파일, HTML 페이지에 포함된 js 코드 등과 같이 어떤 기능에도 포함되지 않은 글로벌 코드입니다.
2 . eval() 함수를 사용하여 동적으로 실행되는 JS 코드입니다.
3. 사용자 정의 함수의 함수 본문 JS 코드입니다.
다양한 유형의 JavaScript 코드입니다. . 다른 실행 컨텍스트

한 페이지에서 JS 코드가 처음 로드될 때 함수가 다시 호출되면 해당 실행 환경으로 들어갑니다. 다른 함수를 호출(또는 동일한 함수를 재귀적으로 호출)하면 새로운 실행 환경이 생성되고, 호출된 함수가 반환될 때 실행 프로세스는 이 환경에 있게 됩니다. 따라서 실행 중인 JavaScript 코드는 실행 환경 스택을 구성합니다.

예를 살펴보겠습니다.



코드 복사

코드는 다음과 같습니다.


자바스크립트 이해_12_실행 모델에 대한 간략한 분석_자바스크립트 스킬
위는 프로그램이 위에서 아래로 실행될 때의 실행 환경 스택 다이어그램이다.

추가 설명:
글로벌 실행 환경은 글로벌 코드(Global Code)에 해당합니다.
Fn1 실행 환경과 Fn2 실행 환경은 흔히 함수 실행 환경으로 알려져 있으며 함수 코드(Function Code: 함수 정의 코드)에 해당합니다. )

프로그램은 각 실행 환경에 진입할 때 Variable Object라는 객체를 생성합니다.
함수 실행 환경에서는 함수에 해당하는 각 매개변수, 로컬 변수, 내부 메소드가 Variable Object에 속성을 생성합니다. 속성 이름은 변수 이름이고, 속성 값은 변수 값입니다. 전역 실행 환경에 대해 동일한 동작을 갖습니다. 다만 한 가지 강조할 점은 전역 실행 환경에서는 Variable 객체가 전역 객체라는 점이다. 전역 객체는 "Javascript의 전역 뷰 이해_03_javascript"에서 설명한 바 있으며 간단히 윈도우 객체로 이해하면 된다. 이는 또한 전역 메서드와 전역 변수가 모두 창 개체의 속성 또는 메서드인 이유를 설명합니다.
코드 복사 코드는 다음과 같습니다.

var num = 123;
alert(window.num);//123
function say(msg){
alert(msg) ;
}
window.say("hello");//hello

마지막으로 말씀드릴 점은 Variable Object 개체는 내부 개체이므로 직접 액세스할 수 없다는 것입니다. JS 코드.

Scope/Scope Chain 정보
변수에 접근할 때 반드시 가시성 문제가 있는데, 바로 Scope입니다. 더 깊이 들어가 보면, JavaScript 엔진은 변수에 접근하거나 함수를 호출할 때 규칙에 따라 다양한 실행 위치에 있는 변수 개체로부터 연결 목록을 구성합니다. . 찾을 수 없는 경우 검색이 끝날 때까지 두 번째 변수 개체를 계속 검색합니다. 이는 또한 스코프 체인(Scope Chain)의 개념을 형성했습니다.
자바스크립트 이해_12_실행 모델에 대한 간략한 분석_자바스크립트 스킬
스코프 체인 다이어그램은 실행 환경과 범위 간의 관계(일대일 대응), 범위 간의 관계(연결된 목록 구조, 위에서 아래로의 관계)를 명확하게 표현합니다.

참고: 이 문서에서는 전역적인 관점에서 JavaScript 실행 모델만 살펴보기 때문에 구체적인 실행 세부 정보는 후속 블로그 게시물을 참조하시기 바랍니다.

참조:
http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html
http://www .cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html
http://lifesinger.org/blog/2009/01/javascript-run-mechanism/
성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.