js 프로그램 실행 및 시퀀스 구현에 대한 자세한 설명_javascript 기술

함수 선언 및 호출
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 파일 처리

'코드 블록'은 <스크립트 유형="텍스트/웹페이지 특수 효과"> 태그에 싸인 js 코드는 말도 안되는 파일을 참조합니다. :D 브라우저는 각 블록이나 파일을 독립적으로 스캔한 후 전역 코드를 순차적으로 실행합니다(2에서 언급). 따라서 한 블록(파일)에서는 호출 후에 함수를 "정의"할 수 있지만 두 블록에서는 함수가 정의된 블록이 함수가 호출되는 블록 앞에 있어야 합니다. 혼란스럽네요. 예를 보세요.
코드는 다음과 같습니다.

코드 복사 코드 /javascript">
function Fn(){
alert("Hello World!");
}

// 오류: 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 헤드...



//먼저 "I am inside the Wall.."이 뜹니다.
//다음에 "I am Outside"가 뜹니다. 장벽!"


본체의 onload 이벤트가 발생하는 조건은 본문 콘텐츠가 로드되고 이 이벤트가 발생하기 전에 본문의 js 코드가 실행된다는 것입니다(왜? 6에서 알려줍니다...)

6. JavaScript는 멀티 스레드인가요, 아니면 단일 스레드인가요?
엄밀히 말하면 JavaScript에는 멀티스레딩이라는 개념이 없습니다. 모든 프로그램은 "단일 스레드"에서 순차적으로 실행됩니다.
부적절한 예:
코드는 다음과 같습니다.

코드를 복사하세요 코드는 다음과 같습니다.

function fn1(){
var sum = 0
for(var ind=0; ind<1000; ind ) {
sum = ind; 🎜>alert("답은" sum);
}
function fn2(){
alert("더 일찍 알았지만 말하지 않았을 뿐입니다.")
}
fn1();
fn2();


//처음에는 "답은 499500입니다.",

//그 다음에는 "알고 있었습니다. 이전에 말했지만 말하지 않았을 뿐입니다."

그럼 질문해야 합니다. 지연 실행 및 Ajax 비동기 로딩은 멀티스레드가 아닌가? 예, 다음과 같은 프로그램은 "멀티 스레드"로 보입니다.
코드는 다음과 같습니다.

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

function fn1(){

setTimeout(function(){
alert("내가 먼저 전화합니다")
},1000)
}
function fn2(){
alert("나중에 전화하겠습니다")
}
fn1()
fn2();// 먼저 팝업 : "나중에 전화할게요",
// 1초 후에 팝업이 뜹니다: "먼저 전화할게요"


fn2()와 지연 프로그램은 두 가지로 나누어져 있는 것 같아요 두 개의 프로세스가 있지만 실제로는 운영 체제의 "인터럽트 및 응답"과 유사한 "콜백" 메커니즘이 작동 중입니다. 지연 프로그램은 "인터럽트"를 설정한 다음 fn2()를 실행하고 1000을 기다립니다. 밀리초 동안 호출한 다음 다시 호출하여 fn1()을 실행합니다.
마찬가지로 5에서 본문의 onload 이벤트에 의해 호출되는 함수도 콜백 메커니즘을 사용합니다. 본문이 로드된 후 콜백은 fnOnLoad() 함수를 실행합니다.

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


7. 콜백 함수

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

코드 복사 코드는 다음과 같습니다. function onBack(num){

alert("Shanshan I'm late")

//Execute num slaps
}
function 데이트(hours, callBack ){
var SP= 0; // SP, 분노 값
//암컷 돼지의 발이 몇 시간 동안 눈 속에 서 있었다
//사이클이 시작됩니다..
SP;
/ /루프 종료...
callBack(SP)
}
dating(1, onBack);