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檔案的處理
「程式碼區塊」是指一對ca2e3cabbee152e932480e15eb7c696a2cacc6d41bbb37262a98f745aa00fbf0標籤包裹著的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執行順序分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!