js 程式執行與順序實作詳解_javascript技巧

函數的宣告與呼叫
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檔案的處理

「程式碼區塊」是指一對標籤包裹著的js程式碼，檔案就是指檔啦，廢話:D
瀏覽器對每個區塊或檔案進行獨立的掃描，然後對全域的程式碼進行順序執行(2中講到了)。所以，在一個區塊(檔案)中，函數可以在呼叫之後進行「定義式」定義；但在兩個區塊中，定義函數所在的區塊必須在函數被呼叫的區塊之前。
很繞口，看範例好了：
程式碼如下:

複製程式碼

程式碼如下:

// 報錯：Fn is notdefined，兩個區塊換過來就對了

4. 重複定義函數會覆蓋前面的定義

這和變數的重複定義是一樣的，程式碼：
程式碼如下:

複製程式碼

程式碼如下:

function fn(){
alert(1);
}
function fn( ){
alert(2);
}
fn();
// 彈出：「2」

如果是這樣呢：
程式碼如下:

複製程式碼

程式碼如下:

fn();
function fn(>
fn(); {
alert(1);
}
function fn(){
alert(2);
}

// 還是彈出：「2」


還是彈出“2”，為什麼？ 2都講了好吧…
5. body的onload函數與body內部函數的執行

body內部的函數會先於onload的函數執行，測試程式碼：

程式碼如下: 複製程式碼

程式碼如下:


//html head...




//先彈出「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; indsum = 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);