js 실행 순서 분석-JS 튜토리얼-php.cn

js 실행 순서 분석

小云云

풀어 주다： 2018-03-07 10:56:01

원래의

1575명이 탐색했습니다.

JavaScript는 브라우저에서 동적으로 구문 분석하고 실행하는 설명 스크립트 언어입니다. 일반적으로 함수를 정의하는 방법에는 두 가지가 있습니다. 브라우저는 방법에 따라 구문 분석 순서가 다릅니다. 이 기사에서는 모든 사람에게 도움이 되기를 바라며 주로 js 실행 순서 분석을 공유합니다.

코드는 다음과 같습니다:

//“定义式”函数定义 
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 파일 처리
"코드 블록"은 file 은 파일입니다, 말도 안 돼요 :D
브라우저는 각 블록이나 파일을 독립적으로 스캔한 다음 전역 코드를 순차적으로 실행합니다(2에서 언급). 따라서 한 블록(파일)에서는 호출 후에 함수를 "정의"할 수 있지만 두 블록에서는 함수가 정의된 블록이 함수가 호출되는 블록 앞에 있어야 합니다.
매우 복잡합니다. 예를 살펴보세요.
코드는 다음과 같습니다.

<script type="text/javascript"> 
Fn(); 
</script> 
<script type="text/javascript"> 
function Fn(){ 
alert("Hello World!"); 
} 
</script> 
// 报错：Fn is notdefined，两个块换过来就对了

로그인 후 복사

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의 내부 함수 실행 body의 내부 함수는 onload 함수 이전에 실행됩니다. 테스트 코드:
코드는 다음과 같습니다.

//html head... 
<script type="text/javascript"> 
function fnOnLoad(){ 
alert("I am outside the Wall!"); 
} 
</script> 
<body onload="fnOnLoad();"> 
<script type="text/javascript"> 
alert("I am inside the Wall.."); 
</script> 
</body> 
//先弹出“I am inside the Wall..”; 
//后弹出“I am outside the Wall!”

로그인 후 복사

body's 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("姗姗我来迟了"); 
// 执行num个耳光 
} 
function dating(hours, callBack){ 
var SP= 0; // SP,愤怒值 
//女猪脚在雪里站了hours个钟头 
//循环开始.. 
SP ++; 
//循环结束... 
callBack(SP); 
} 
dating(1, onBack);

로그인 후 복사