JavaScript 언어의 실행 메커니즘을 이해할 수 없거나 간단히 말하면 JavaScript의 실행 순서를 마스터 할 수 없으면 천 마일 말을 통제 할 수없는 덩어리와 같습니다. 약.
그렇다면 JavaScript는 어떻게 구문 분석합니까? 실행 순서는 무엇입니까? 이것을 이해하기 전에 먼저 몇 가지 중요한 용어를 이해해 봅시다.
1. 코드 블록
JavaScript의 코드 블록은 코드 세그먼트를 <Script> 태그로 나눈 값을 나타냅니다. 예를 들어:
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
Alert ( "이것은 코드 블록 1입니다");
</스크립트>
<script type = "text/javaScript">
경고 ( "이것은 코드 블록 2입니다");
</스크립트>
코드 블록에 따라 JS가 컴파일되고 실행되지만 변수와 메소드는 공유됩니다. 예를 들어 무엇을 의미합니까?
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
Alert (str); // str가 정의되지 않기 때문에 브라우저에 오류가 있고 다음은 실행할 수 없습니다.
ALERT ( "나는 코드 블록 하나입니다"); // 여기서 실행되지 않습니다
var test = "나는 코드 블록 변수입니다";
</스크립트>
<script type = "text/javaScript">
ALERT ( "나는 코드 블록 2"); // 여기에 실행됩니다
alert (test); // popt "나는 코드 블록 변수"
</스크립트>
위의 코드에서는 코드 블록 1에 오류 가보고되지만 코드 블록 2의 독립성은 코드 블록의 독립성에 영향을 미치지 않습니다. -블록 공유.
2. 선언적 기능 및 할당 기능
JS의 함수 정의는 선언 함수와 할당 함수의 두 가지 유형으로 나뉩니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 fn () {// 선언 함수
}
var fn = function {// 할당 함수
}
</스크립트>
선언적 함수와 할당 함수의 차이점은 JS의 사전 컴파일 기간 동안 선언 기능이 먼저 추출 된 다음 JS 코드가 순서대로 실행된다는 것입니다.
3. 사전 컴파일 기간 및 실행 기간
실제로, JS의 구문 분석 프로세스는 사전 컴파일 기간 (전처리)과 실행 기간의 두 단계로 나뉩니다.
사전 컴파일 기간 동안 JS는이 코드 블록의 모든 선언 된 변수와 함수를 처리하지만 (C의 컴파일과 유사), 현재 함수를 처리하는 유일한 것은 선언적이며 변수는 다음과 같습니다. 선언되지 않았다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
fn (); // 실행 결과 : "기능 2가 실행되었습니다", 동일한 이름을 가진 기능의 후자는 전자를 무시합니다.
함수 fn () {// 함수 1
경고 ( "함수 1이 실행되었습니다");
}
함수 fn () {// 함수 2
경고 ( "함수 2가 실행되었습니다");
}
</스크립트>
<script type = "text/javaScript">
fn (); // 실행 결과 : "선언 함수가 실행되었다"는 실행되었고, 선언 기간 동안 함수가 선언되고 처리되었으므로, 선언 함수가 선언되기 전에 fn () 호출 함수가 배치 되더라도.
함수 fn () {// 선언 함수
경고 ( "선언 된 함수 실행");
}
var fn = function () {// 할당 함수
Alert ( "할당 함수 실행");
}
</스크립트>
// 코드 블록 1
<script type = "text/javaScript">
ALERT (str); // 브라우저 오류 가보고되었지만 정보 창이 팝업되지 않았습니다.
</스크립트>
// 코드 블록 2
<script type = "text/javaScript">
alert (str); // popt-u-up Window "undefined"
var str = "aaa";
</스크립트>
// JS는 전처리 기간 동안 변수를 선언하지만 값을 초기화하고 할당하지 않으므로 코드 블록 2의 변수는 완화되지 않으며 코드 1의 변수는 전혀 존재하지 않으므로 브라우저는 오류를보고합니다.
위의 용어를 이해 한 후에는 JS의 실행 메커니즘에 대한 대략적인 인상이 있다고 생각합니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
fn (); // 브라우저 오류 : "정의되지 않은"
</스크립트>
<script type = "text/javaScript">
함수 fn () {// 함수 1
경고 ( "함수 1이 실행되었습니다");
}
</스크립트>
위의 코드를 실행할 때 브라우저가 오류를보고하는 이유는 무엇입니까? 전처리 기간 동안 선언 기능이 처리되지 않습니까? 실제로 이것은 오해 지점입니다. 우리는 JS 엔진이 코드 블록 순서대로 실행되었다고 말했습니다. 코드. 블록은 함수와 변수를 선언하지만 언로드 코드 블록의 경우 전처리 할 수 없으며 컴파일하는 동안 처리의 핵심이기도합니다.
이제 요약하고 구성합시다.
코드 사본은 다음과 같습니다.
1 단계. 첫 번째 코드 블록을 읽으십시오.
2 단계. 구문 분석을 수행하십시오. 오류가 있으면 구문 오류 (예 : 브래킷 불일치 등)를보고합니다.
3 단계. var 변수 및 함수 정의의 "사전 컴파일 처리"를 수행합니다 (올바른 선언 만 구문 분석하기 때문에 오류 보고서는 절대보고되지 않습니다).
4 단계. 코드 세그먼트를 실행하면 오류가 있으면 오류가보고됩니다 (예 : 변수가 정의되지 않음).
5 단계. 다른 코드 세그먼트가있는 경우 다음 코드 세그먼트를 읽고 STEP2를 반복하십시오.
단계 6.
HTML 문서 스트림의 실행 순서에 따르면, 페이지 요소 렌더링 전에 실행 해야하는 JS 코드는 <body> 전에 <cript> 코드 블록에 배치해야하며 페이지 요소가로드 된 후 JS를 배치해야합니다. 요소 후 </바디>에서, 본체 태그의 온부하 이벤트는 끝에 실행됩니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
경고 ( "첫 번째");
함수 fn () {
경고 ( "셋째");
}
</스크립트>
<body onload = "fn ()">
</body>
<script type = "text/javaScript">
경고 ( "두 번째");
</스크립트>