javascript 실행순서에 대한 심층적인 이해_기본지식

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

풀어 주다： 2016-05-16 16:53:24

원래의

1071명이 탐색했습니다.

JavaScript 언어의 작동 메커니즘을 이해할 수 없다면, 간단히 말해서 JavaScript의 실행 순서를 마스터할 수 없다면, 당신은 천 마일의 말을 제어할 수 없고 천 마일의 말을 풀어줄 수 없는 Bole과 같습니다. 그리고 뛰어다닙니다.

그럼 JavaScript는 어떻게 파싱하나요? 실행 순서는 무엇입니까? 이를 이해하기 전에 먼저 몇 가지 중요한 용어를 이해해 보겠습니다.

1. 코드 블록
JavaScript의 코드 블록은 <script> 태그로 구분된 코드 세그먼트를 나타냅니다. 예: <br></p> <div class="codetitle"> <span><a style="CURSOR: pointer" data="50623" class="copybut" id="copybut50623" onclick="doCopy('code50623')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code50623"> <br><script type=" text/javascript" ><br> Alert("코드 블록 1입니다.");<br></script>

JS는 코드 블록에 따라 컴파일되고 실행됩니다. 코드 블록은 서로 독립적이지만 변수와 메서드는 공유됩니다. 예를 들어,

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

코드에서는 코드 블록 1에서 실행 시 오류가 보고되지만 코드 블록 2의 실행에는 영향을 미치지 않습니다. 이는 코드 블록과 변수 간의 독립성입니다. 코드 1에서는 블록 간 공유를 수행하는 코드 블록 2에서 호출할 수 있습니다.

2. 선언적 함수와 할당 함수

JS의 함수 정의는 선언 함수와 할당 함수의 두 가지 유형으로 나뉩니다.

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

//js는 전처리 기간 동안 변수를 선언하지만 초기화 및 값 할당을 수행하지 않으므로 코드 블록 2의 변수는 정리되지 않은 반면 코드 1의 변수는 전혀 존재하지 않으므로 브라우저에서 오류를 보고합니다.

위의 용어를 이해하신 후에는 JS의 작동 메커니즘에 대해 대략적인 인상을 가지셨으리라 믿습니다. 이제 예를 살펴보겠습니다.

코드 복사

코드는 다음과 같습니다.

위 코드를 실행할 때 브라우저에서 오류를 보고하는 이유는 무엇인가요? 선언된 함수는 전처리 기간 동안 처리되지 않나요? 왜 Fn() 함수를 찾을 수 없나요? 사실, 이는 JS 엔진이 코드 블록에 따라 순차적으로 실행된다고 말한 오해입니다. 실제로는 코드 블록에 따라 전처리되고 실행되어야 하며, 이는 실행된 코드만 함수를 선언한다는 의미입니다. 아직 로드되지 않은 변수, 코드 블록은 전처리할 수 없습니다. 이는 컴파일 시 처리의 핵심이기도 합니다.

이제 요약해서 정리해 보겠습니다.

코드 복사

코드는 다음과 같습니다.

step 1. 첫 번째 코드 블록을 읽어보세요. 2단계. 구문 분석을 수행합니다. 오류가 있으면 구문 오류(예: 대괄호 불일치 등)가 보고되고 5단계로 이동합니다. 3단계. var 변수 및 함수 정의에 대해 "컴파일 전 처리"를 수행합니다(올바른 선언만 구문 분석되므로 오류가 보고되지 않습니다). 4단계. 코드 세그먼트를 실행하고 오류가 있으면 오류를 보고합니다(예: 변수가 정의되지 않음). Step 5. 다른 코드 세그먼트가 있으면 다음 코드 세그먼트를 읽고 2단계를 반복하세요.

6단계 끝.

HTML 문서 흐름의 실행 순서에 따라 페이지 요소가 렌더링되기 전에 실행해야 하는 js 코드는 <script> body>는 페이지 요소에 있어야 합니다. 로드된 js는 </body> 요소 뒤에 배치되고 body 태그의 onload 이벤트는 마지막에 실행됩니다. <br><br><br><br><br>코드 복사</div> <br><br> 코드는 다음과 같습니다.<div class="codetitle"> <span><a style="CURSOR: pointer" data="50219" class="copybut" id="copybut50219" onclick="doCopy('code50219')"><script type="text/javascript "> <u> 경고("첫 번째");</u> 함수 Fn(){</a> 경고("세 번째");</span> }</div></script>

저자별 최신 기사