js執行順序分析-js教程-PHP中文網

首頁

web前端

js教程

js執行順序分析

小云云

Mar 07, 2018 am 10:56 AM

javascript分析順序

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 is not a function，瀏覽器未對Fn2進行預處理，依序執行，所以報錯Fn2未定義。

3. 程式碼區塊及js檔案的處理
「程式碼區塊」是指一對標籤包裹著的js程式碼，檔案就是指檔案啦，廢話: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的onload事件觸發條件是body內容載入完成，而body中的js程式碼會在這事件觸發之前執行(為什麼呢?6告訴你..)

6. JavaScript是多執行緒or單執行緒？
嚴格來說，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()和延時程式是分兩個過程再走，但其實，這是JavaScript中的“回調”機制在起作用，類似於作業系統中的“中斷和回應” —— 延時程式設定一個“中斷”，然後執行fn2()，待1000毫秒時間到後，再回調執行fn1()。
同樣，5中body的onload事件呼叫的函數，也是利用了回呼機制－body載入完成之後，回呼執行fnOnLoad()函數。
Ajax請求中的資料處理函數也是一樣的道理。
關於JavaScript線程問題的更深入討論，看這篇 javascript中的線程之我見，以及infoQ上的 JavaScript多線程程式設計簡介。
困了，再說一下回呼函數吧。

7. 回呼函數
回呼函數是幹嘛用的？就是回呼執行的函數嘛，又廢話:D
如6所說，最常見的回調就是onclick、onmouseo教程ver、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);

#相關推薦：

關於js執行順序解決想法

#頁面中js執行順序_javascript技巧

JavaScript執行順序分析

以上是js執行順序分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn