JavaScript pre-parsing_javascript 기술 이해

WBOY
풀어 주다: 2016-05-16 18:43:26
원래의
1083명이 탐색했습니다.

실제로 또는 어떤 현상은 이것이 사실이 아님을 증명합니다. "JavaScript Definitive Guide" 및 관련 온라인 정보를 통해 JavaScript에 "사전 구문 분석" 동작이 있음을 알게 되었습니다. 이 기능을 이해하는 것이 중요합니다. 그렇지 않으면 실제 개발 중에 해결할 수 없는 많은 문제가 발생할 수 있으며 심지어 프로그램 버그로 이어질 수도 있습니다. 이 현상을 분석하기 위해, 그리고 제가 배운 내용을 요약하여 이 글에서는 점차적으로 JavaScript "사전 파싱"을 이해할 수 있도록 안내하겠습니다. 제 의견이 틀렸다면 정정해 주시기 바랍니다.
(1) 자바스크립트가 런타임 시 위에서 아래로만 파싱된다면 함수를 먼저 정의한 후 호출하기 때문에 다음 코드가 제대로 실행될 수 있다는 것은 이해가 됩니다.

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

function showMsg()
{
alert ('This is message');
}
showMsg(); // This is message

(2) 함수를 호출한 후에 정의할 수 있다는 것도 알고 있습니다. 코드는 다음 코드와 마찬가지로 정상적으로 작동할 수 있습니다. showMsg()가 호출될 때 showMsg()가 아직 정의되지 않은 것 같지만 정상적으로 작동하며 이는 JavaScript가 "사전 구문 분석"되었음을 나타냅니다.
코드 복사 코드는 다음과 같습니다.

showMsg() // 메시지입니다.
function showMsg()
{
alert('This is message');
}

(3) 위는 함수의 예시이고, 여기서는 일반 변수의 또 다른 예입니다. 다음 예제를 실행하면, 첫 번째 문장의 msg가 정의되었지만 초기화되지 않았음을 나타내는 undefed가 팝업됩니다. var msg; 아래 두 번째 문장을 주석 처리하면 "msg가 정의되지 않았습니다" 오류가 보고됩니다. 이는 또한 JavaScript가 "사전 구문 분석"되었음을 나타냅니다.
코드 복사 코드는 다음과 같습니다.

alert(msg); 🎜>var msg='This is message';

(4) JavaScript "사전 구문 분석"에 대한 인상을 깊게 하기 위해 또 다른 예를 살펴보겠습니다. 다음 코드에서는 두 번 팝업되는 대화 상자에 메시지 2가 표시되는 것을 볼 수 있습니다. 왜 그럴까요? 실제로 아래에서 동일한 이름을 가진 두 함수가 차례로 정의됩니다. 이후의 showMsg()는 이전에 정의된 함수를 덮어씁니다(JavaScript에서는 동일한 이름을 가진 변수도 덮어쓰기 문제가 있음). 이는 첫 번째 showMsg()를 의미합니다. 폐기됩니다. showMsg()의 두 번째 호출이 위에 정의된 메시지 1 함수를 호출하지 않는 이유는 무엇입니까? 이는 JavaScript에 "준비" 동작이 있음을 다시 한 번 증명합니다.

코드 복사 코드는 다음과 같습니다.
showMsg() // 메시지입니다. 2
function showMsg()
{
alert('메시지 1입니다.')
}
showMsg() // 메시지 2입니다.
function showMsg()
{
alert('메시지 2입니다');
}

(5) JavaScript "사전 구문 분석"은 변수나 함수를 환경에 미리 구문 분석하는 것입니다. 호출할 수 있습니다(가변 실행 환경). 다음 코드는 경고(msg) 이전에 msg의 정의를 본 것으로 보이지만 프로그램은 여전히 ​​"msg가 정의되지 않았습니다"라는 오류를 보고합니다. 이는 함수에 정의된 변수가 함수의 전용 변수이므로 호출할 수 없기 때문입니다. 이는 JavaScript의 "사전 구문 분석"이 정의된 모든 변수를 창과 같은 전역 개체로 구문 분석하는 것을 의미하지 않음을 나타냅니다.

코드 복사 코드는 다음과 같습니다.
function showMsg()
{
var msg='메시지입니다';
}
alert(msg); // msg가 정의되지 않았습니다

(6) JavaScript "사전 구문 분석"이 섹션에서 수행됩니다. , 정확하게는 <script> 블록으로 나누어져 있습니다. 다음 코드는 동일한 페이지의 두 스크립트 블록에 표시되며 동일한 이름을 가진 세 개의 함수를 정의합니다. 프로그램 실행 결과는 두 번째 스크립트 블록의 showMsg()가 처음 두 개의 showMsg()를 포함하지 않는 반면, 첫 번째 스크립트 블록의 두 번째 showMsg()는 첫 번째 showMsg()를 포함함을 보여줍니다. <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="50995" class="copybut" id="copybut50995" onclick="doCopy('code50995')">코드 복사<u></u></a> 코드는 다음과 같습니다.</span></div> <div class="codebody" id="code50995"><body> script type= "text/javascript"> <br>showMsg(); //메시지 2입니다. <br>function showMsg() <br>{ <br>alert('메시지 1입니다.'); } <br>function showMsg() <br>{ <br>alert('메시지 2입니다.') <br>} <br></script>

🎜>
작성자: WebFlash
출처: http://webflash.cnblogs.com
관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿