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

순서가 좀 지저분할 수 있으니 너무 많이 쓰면 정리하겠습니다. 몇몇 용어는 적절하지 않을 수 있으니 비판과 수정은 환영합니다. 아래에 사용된 샘플 프로그램은 본인이 검증했으며 모든 주요 브라우저와 호환됩니다. 좋아, 요점을 살펴보자.
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...

엄밀히 말하면 JavaScript에는 멀티스레딩이라는 개념이 없습니다. 모든 프로그램은 "단일 스레드"로 순차적으로 실행됩니다.
부적절한 예를 들면


코드 복사

코드는 다음과 같습니다. 함수 fn1(){ var sum = 0; for(var ind=0; indsum = ind;

}
alert("답은" sum ; 🎜>그런 다음 질문해야 합니다. 지연된 실행은 어떻습니까? Ajax 비동기 로딩은 멀티 스레드가 아닌가요? 예, 다음과 같은 프로그램은 "다중 스레드"로 보입니다.




코드 복사


코드는 다음과 같습니다.


function fn1(){
setTimeout(function(){
alert("내가 먼저 전화합니다")
},1000)

}
function fn2() {
alert("나중에 전화하겠습니다");

fn1(); fn2() // 먼저 팝업: "나중에 전화하겠습니다", // 1초 그러다가 뜬다: "내가 먼저 전화한다" fn2()와 지연 프로그램이 2개의 프로세스로 나누어져 있는 것 같지만 사실은 이것이 "콜백"이다 운영 체제의 "인터럽트 및 응답"과 유사한 JavaScript의 메커니즘 - 지연 프로그램은 "인터럽트"를 설정한 다음 fn2()를 실행하고 1000밀리초가 만료될 때까지 기다린 다음 fn1(을 실행하기 위해 다시 호출합니다. ).

마찬가지로 5에서 본문의 onload 이벤트에 의해 호출되는 함수도 콜백 메커니즘을 사용합니다. 본문이 로드된 후 콜백은 fnOnLoad() 함수를 실행합니다.

Ajax 요청의 데이터 처리 기능도 마찬가지입니다.
JavaScript 스레드 문제에 대한 더 자세한 논의는 JavaScript의 스레드에 대한 나의 의견 및 infoQ의 JavaScript 멀티 스레드 프로그래밍 소개 문서를 참조하세요.
피곤해요. 콜백 함수에 대해 다시 얘기해 볼까요.

7. 콜백 기능

콜백 기능은 어떤 용도로 사용되나요? 그냥 콜백으로 실행되는 함수일 뿐이죠, 말도 안되는 소리입니다 :D
6에서 언급했듯이 가장 일반적인 콜백은 onclick, onmouseover, onmousedown, onload 등과 같은 브라우저 이벤트의 호출 기능과 Ajax 비동기 처리 기능입니다. 데이터 요청, SetTimeOut 지연 실행, setInterval 루프 실행 기능 등
재생할 순수 콜백 함수를 작성해 보겠습니다.




코드 복사

코드는 다음과 같습니다.


function onBack(num){
alert("Shanshan 나 늦었어") //slaps 횟수 실행
} function 데이트(시간, 콜백){
var SP= 0; // SP, 분노 값
//암컷 돼지 발이 몇 시간 동안 눈 속에 서 있었습니다
//사이클이 시작됩니다..

SP //사이클이 종료됩니다. ... callBack(SP); } dating(1, onBack)

데이트가 끝난 후 onBack 콜백 함수를 실행합니다. 폭풍이 시작되었습니다.

오늘은 여기까지입니다. 아직 좀 더 깊이 있는 내용을 정리해야 하고, 아직 배워야 할 내용이 더 많습니다. 수정과 추가도 환영하며, 제안도 환영합니다.