1. 程式人生 > >js 程式執行與順序實現詳解

js 程式執行與順序實現詳解

轉自:http://www.jb51.net/article/36755.htm
函式的宣告和呼叫
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未定義。

  1. 程式碼塊及js檔案的處理
    “程式碼塊”是指一對標籤包裹著的js程式碼,檔案就是指檔案啦,廢話:D
    瀏覽器對每個塊或檔案進行獨立的掃描,然後對全域性的程式碼進行順序執行(2中講到了)。所以,在一個塊(檔案)中,函式可以在呼叫之後進行“定義式”定義;但在兩個塊中,定義函式所在的塊必須在函式被呼叫的塊之前。
    很繞口,看例子好了:
    程式碼如下:

複製程式碼 程式碼如下:

Fn(); function Fn(){ alert("Hello World!"); }

// 報錯:Fn is notdefined,兩個塊換過來就對了

  1. 重複定義函式會覆蓋前面的定義
    這和變數的重複定義是一樣的,程式碼:
    程式碼如下:

複製程式碼 程式碼如下:

function fn(){
alert(1);
}
function fn(){
alert(2);
}
fn();
// 彈出:“2”

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

複製程式碼 程式碼如下:

fn();
function fn(){
alert(1);
}
function fn(){
alert(2);
}
// 還是彈出:“2”

還是彈出“2”,為什麼?2都講了好吧…

  1. body的onload函式與body內部函式的執行
    body內部的函式會先於onload的函式執行,測試程式碼:
    程式碼如下:

複製程式碼 程式碼如下:

//html head…

function fnOnLoad(){ alert("I am outside the Wall!"); }

alert("I am inside the Wall..");


//先彈出“I am inside the Wall..”;
//後彈出“I am outside the Wall!”

body的onload事件觸發條件是body內容載入完成,而body中的js程式碼會在這一事件觸發之前執行(為什麼呢?6告訴你..)

  1. 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多執行緒程式設計簡介。
困了,再說一下回調函式吧。

  1. 回撥函式
    回撥函式是幹嘛用的?就是回撥執行的函式嘛,又廢話: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);