>웹 프론트엔드 >JS 튜토리얼 >JavaScript 프로그램 실행 순서 문제 요약_javascript 기술

JavaScript 프로그램 실행 순서 문제 요약_javascript 기술

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

순서가 좀 지저분할 수 있으니 너무 많이 쓰면 정리하겠습니다. 몇몇 용어는 적절하지 않을 수 있으니 비판과 수정은 환영합니다. 아래에 사용된 샘플 프로그램은 본인이 검증했으며 모든 주요 브라우저와 호환됩니다. 좋아, 요점을 살펴보자.
1. 변수 선언 및 참조
변수는 먼저 선언하고 참조해야 한다는 사실은 다들 아시겠지만, 관련 사항은 나중에 다루기 때문에 꼭 말씀드려야 할 부분입니다.


[Ctrl A 모두 선택 참고: 외부 J를 도입해야 하는 경우 실행하려면 새로 고쳐야 합니다.
]
2. 함수 선언 및 호출

JavaScript는 브라우저에서 동적으로 구문 분석하고 실행하는 설명 스크립트 언어입니다. 일반적으로 함수를 정의하는 방법에는 두 가지가 있습니다. 브라우저는 방법에 따라 구문 분석 순서가 다릅니다. 코드는 다음과 같습니다.


//"정의" 함수 정의
function Fn1(){
alert("Hello World!");
}
//"할당" 함수 정의
var Fn2 = function(){
alert("Hello wild ! ");
}


페이지 로딩 프로세스 중에 브라우저는 페이지 또는 로드된 모든 js 코드 블록(또는 파일)을 검색합니다. 정의된 기능을 발견하면 다음을 수행합니다. 전처리(C 등의 컴파일과 유사), 처리가 완료된 후 위에서 아래로 실행을 시작합니다. 할당 함수를 만나면 함수는 전처리 없이 변수에만 할당됩니다(1의 변수와 유사). (정의 후 참조 원칙) 호출되기 전까지는 처리되지 않습니다. 다음은 간단한 예입니다. 코드는 다음과 같습니다.


//" 정의 "함수 정의
Fn1();
function Fn1(){
alert("Hello World!");
}


정상적으로 실행하고 팝업 " Hello World" !", 브라우저는 Fn1을 전처리한 다음 Fn1();에서 실행을 시작합니다. 코드는 다음과 같습니다.


//"할당" 함수 정의
Fn2 ();
var Fn2 = function(){
alert("Hello wild!");
}


Firebug 오류: Fn2는 함수가 아닙니다. 브라우저는 Fn2를 전처리하지 않고 순차적으로 실행하지 않으므로 Fn2 오류는 정의되지 않습니다.
3. 코드 블록 및 js 파일 처리

"코드 블록"은 code, file은 파일을 의미하고, 넌센스입니다. :D
브라우저는 각 블록이나 파일을 독립적으로 스캔한 다음 전역 코드를 순차적으로 실행합니다(2에서 언급). 따라서 한 블록(파일)에서는 호출 후에 함수를 "정의"할 수 있지만 두 블록에서는 함수가 정의된 블록이 함수가 호출되는 블록 앞에 있어야 합니다.
혼란스럽네요. 예시를 보세요. 코드는 다음과 같습니다.




// 오류: Fn이 정의되지 않았습니다. 두 블록을 교체하세요

4. 함수 정의를 반복하면 이전 정의를 덮어씁니다.
변수 정의를 반복하는 것과 동일합니다. 코드:
코드 복사 코드는 다음과 같습니다.

function fn(){
alert(1)
}
function fn (){
alert (2);
}
fn();
// 팝업: "2"

이 경우:
코드 복사 코드는 다음과 같습니다.

fn()
function fn() {
alert(1);
}
function fn(){
alert(2)
}
// 여전히 팝업됨: "2"

계속 '2'가 나타나는데 왜 그럴까요? 2에 대해 설명했습니다...
5. Body의 onload 함수와 body의 내부 기능 실행
onload 함수 이전에 Body의 내부 기능이 실행됩니다:
코드 복사 코드는 다음과 같습니다.

//html head...