JavaScript程式執行順序

來源:互聯網
上載者:User

轉自:http://blogread.cn/it/article/700?f=wb

好記星不如爛筆頭,適時的總結梳理知識讓人更輕鬆愉快。今天總結下學習和開發中遇到的JavaScript執行順序的問題,今天挖個坑,以後會慢慢填,也希望拋磚引玉,能學到更多的東西。

順序可能比較亂,寫多了再整理,有些術語可能運用也不恰當,歡迎批評指正。以下使用的樣本程式都經過了本人的實際驗證,相容各大瀏覽器。OK,步入正題。

1. 變數的聲明和引用

變數必須先聲明後引用,這個大家是都知道的,但還是要說說,因為後面要說到一個相關的問題。


以下是程式碼片段:
alert(myStr); // 彈出"undefined"; var myStr = "Hello World!"; alert(myStr); // 彈出"Hello World";
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 is not a function,瀏覽器未對Fn2進行預先處理,依序執行,所以報錯Fn2未定義。

3. 代碼塊及js檔案的處理

“代碼塊”是指一對<script type=”text/javascript”></script>標籤包裹著的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、onmouseover、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);

dating運行完之後再執行回呼函數onBack ―― 約會結束了,暴風驟雨開始了。

今天先寫到這裡,一些更深入的東西還有待整理,更多的東西還需要繼續學習,歡迎批改補充,歡迎指點迷津。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.