首頁 > 開發者 > JavaScript
好記星不如爛筆頭，適時的總結梳理知識讓人更輕鬆愉快。今天總結下學習和開發中遇到的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 —— 約會結束了，暴風驟雨開始了。
今天先寫到這裡，一些更深入的東西還有待整理，更多的東西還需要繼續學習，歡迎批改補充，歡迎指點迷津。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
