JavaScript 실행 메커니즘 샘플 코드 분석

JavaScript 실행 메커니즘 샘플 코드 분석

간단한 질문으로 시작:

<script type="text/javascript">     
alert(i);   
var i = 1;     
</script>

출력 결과가 정의되지 않았습니다. 이 현상을 "사전 구문 분석"이라고 합니다. JavaScript 엔진은 var 변수와 함수 정의를 먼저 구문 분석합니다. 사전 구문 분석이 완료될 때까지 코드가 실행되지 않습니다. 문서 스트림에 여러 스크립트 코드 세그먼트(스크립트 태그로 구분된 js 코드 또는 가져온 js 파일)가 포함된 경우

실행 순서는 다음과 같습니다.

step1.
step2. . 구문 분석을 수행합니다. 오류가 있는 경우 구문 오류(예: 일치하지 않는 대괄호 등)가 보고되고 5단계
3단계로 이동합니다. var 변수 및 함수 정의를 "사전 구문 분석"합니다. 오류가 보고됩니다) , 올바른 선언만 구문 분석되기 때문입니다.
step4. 코드 세그먼트를 실행하고 오류가 있는 경우(예: 변수가 정의되지 않은 경우)
step5. 또 다른 코드 세그먼트를 읽고 다음 코드 세그먼트를 반복합니다.
6단계.End

위의 분석으로 이미 많은 문제가 설명될 수 있지만 항상 뭔가 빠진 느낌이 듭니다. 예를 들어 3단계에서 "사전 구문 분석"이란 정확히 무엇입니까? 그리고 4단계에서 다음 예를 살펴보세요.

<script type="text/javascript">     
alert(i); // error: i is not defined.     
i = 1;     
</script>

첫 번째 문장에서 오류가 발생하는 이유는 무엇인가요? JavaScript에서는 변수를 정의하지 않아도 되나요?

편찬 과정

시간은 백마처럼 흘러간다. 책장 옆에 마치 저 세상인 듯 『편집의 원리』가 펼쳐져 있다. 아직 생소한 공백:

기존 컴파일 언어의 경우 컴파일 단계는 어휘 분석, 구문 분석, 의미 검사, 코드 최적화 및 바이트 생성으로 나뉩니다.

그러나 해석된 언어의 경우 어휘 분석과 구문 분석을 통해 구문 트리를 얻은 후에 해석과 실행이 시작됩니다.

간단히 말하면 어휘 분석은 문자 스트림(char 스트림)을 토큰 스트림(토큰 스트림)으로 변환하는 것입니다. 예를 들어 c = a – b;

NAME "c" 
EQUALS  
NAME "a" 
MINUS  
NAME "b" 
SEMICOLON

위의 내용과 같습니다. 는 예시일 뿐이며, 더 자세한 이해를 원하시면 Lexical Analysis를 확인하시기 바랍니다.

"The Definitive Guide to JavaScript"의 2장에서는 ECMA-262에도 설명되어 있는 Lexical Structure에 대해 설명합니다. 어휘 구조는 언어의 기초이며 익히기가 쉽습니다. 어휘 분석의 구현에 관해서는 이는 또 다른 연구 분야이므로 여기서는 다루지 않을 것입니다. <… 이해하기 어려운 토큰 스트림. 추가 번역에는 문법적 분석이 필요합니다. 다음 그림은 조건문의 구문 트리입니다.

구문 트리를 구성할 때 if(a { i = 2; }, 구문 오류를 보고하고 전체 코드 블록의 구문 분석을 종료합니다.

구문 분석을 통해 구문 트리를 구성한 후에도 번역된 문장이 여전히 남아 있을 수 있습니다. 다음으로 추가 의미 검사가 필요합니다. 전통적인 강력한 유형 언어의 경우 의미 검사의 주요 부분은 함수의 실제 매개변수 유형과 형식 매개변수 유형이 일치하는지 여부와 같은 유형 검사입니다. 사용할 수 있습니다(에너지가 부족하고 JS 엔진 구현을 살펴볼 시간이 없습니다. JS 엔진에 의미 확인 단계가 있는지 잘 모르겠습니다)

위에서 볼 수 있습니다. JavaScript 엔진의 경우 어휘 분석, 구문 분석, 의미 검사, 코드 최적화 및 기타 단계가 필요하다는 분석입니다. (모든 언어에는 컴파일 프로세스가 있지만 해석된 언어는 컴파일되지 않습니다.) 바이너리 코드로 변환), 코드 실행이 시작됩니다

.

위의 컴파일 프로세스는 여전히 기사 시작 부분의 "사전 구문 분석"을 더 깊이 설명할 수 없습니다. JavaScript 코드

실행 프로세스

주. Aimin은 "JavaScript 언어 및 프로그래밍 실습의 본질"의 두 번째 부분에서 이에 대해 매우 주의 깊게 분석했습니다.

컴파일을 통해 JavaScript 코드는 구문 트리로 변환된 후 구문 트리에 따라 즉시 실행됩니다.

추가 실행을 위해서는 범위 메커니즘을 이해해야 합니다. JavaScript는 어휘 범위를 사용합니다. JavaScript 변수의 범위는 실행 시가 아니라 실행 시에 결정됩니다. 즉, 어휘 범위는 소스 코드에 따라 결정됩니다. 따라서 어휘 범위는 정적 범위(정적 범위)라고도 합니다. 그러나 with 및 eval의 의미에 주의해야 합니다. 실제로는 정적 기술로만 달성할 수 있습니다. JS의 범위 메커니즘은 어휘 범위에 매우 가깝다고 할 수 있습니다.

JS 엔진은 각 함수 인스턴스를 실행할 때 실행 컨텍스트를 생성합니다. 호출 개체는 scriptObject 구조입니다. 내부 변수 테이블 varDecls, 내장 함수 테이블 funDecls, 상위 참조 목록 upvalue 및 기타 구문 분석 구조를 저장하는 데 사용됩니다(참고: varDecls 및 funDecls 및 기타 정보는 구문 분석 단계에서 얻어져 구문에 저장됩니다. 나무. 함수 인스턴스가 실행되면 이 정보는 구문 트리에서 scriptObject로 복사됩니다. scriptObject는 함수 인스턴스의 수명 주기와 일치하는 함수와 관련된 정적 시스템 집합입니다.

lexical scope是JS的作用域机制，还需要理解它的实现方法，这就是作用域链（scope chain）。scope chain是一个name lookup机制，首先在当前执行环境的scriptObject中寻找，没找到，则顺着upvalue到父级scriptObject中寻找，一直 lookup到全局调用对象（global object）。

当一个函数实例执行时，会创建或关联到一个闭包（closure）。 scriptObject用来静态保存与函数相关的变量表，closure则在执行期动态保存这些变量表及其运行值。closure的生命周期有可能比函数实例长。函数实例在活动引用为空后会自动销毁，closure则要等要数据引用为空后，由JS引擎回收（有些情况下不会自动回收，就导致了内存泄漏）。

别被上面的一堆名词吓住，一旦理解了执行环境、调用对象、闭包、词法作用域、作用域链这些概念，JS语言的很多现象都能迎刃而解。

小结

至此，对于文章开头部分的疑问，可以解释得很清楚了：

step3中所谓的“预解析”，其实是在step2的语法分析阶段完成，并存储在语法树中。当执行到函数实例时，会将varDelcs和funcDecls从语法树中复制到执行环境的scriptObject上。

step4中，未定义变量意味着在scriptObject的变量表中找不到，JS引擎会沿着scriptObject的upvalue往上寻找，如果都没找到，对于写操作i = 1; 最后就会等价为 window.i = 1; 给window对象新增了一个属性。对于读操作，如果一直追溯到全局执行环境的scriptObject上都找不到，就会产生运行期错误。

理解后，雾散花开，天空一片晴朗。

最后，留个问题给大家：

<script type="text/javascript">     
var arg = 1;     
function foo(arg) {     
alert(arg);     
var arg = 2;     
}     
foo(3);     
</script>

请问alert的输出是什么？

위 내용은 JavaScript 실행 메커니즘 샘플 코드 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!