&

JavaScript程序執(zhí)行順序問(wèn)題總結(jié)

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

2010年8月14日 2:23 本文熱度 4702

好記星不如爛筆頭，適時(shí)的總結(jié)梳理知識(shí)讓人更輕松愉快。今天總結(jié)下學(xué)習(xí)和開(kāi)發(fā)中遇到的JavaScript執(zhí)行順序的問(wèn)題，今天挖個(gè)坑，以后會(huì)慢慢填，也希望拋磚引玉，能學(xué)到更多的東西。

順序可能比較亂，寫(xiě)多了再整理，有些術(shù)語(yǔ)可能運(yùn)用也不恰當(dāng)，歡迎批評(píng)指正。以下使用的示例程序都經(jīng)過(guò)了本人的實(shí)際驗(yàn)證，兼容各大瀏覽器。OK，步入正題。

1. 變量的聲明和引用

變量必須先聲明后引用，這個(gè)大家是都知道的，但還是要說(shuō)說(shuō)，因?yàn)楹竺嬉f(shuō)到一個(gè)相關(guān)的問(wèn)題。

alert(myStr); // 彈出"undefined";

var myStr = "Hello World!";

alert(myStr); // 彈出"Hello World";

2. 函數(shù)的聲明和調(diào)用

JavaScript是一種描述型腳本語(yǔ)言，由瀏覽器進(jìn)行動(dòng)態(tài)的解析與執(zhí)行。函數(shù)的定義方式大體有以下兩種，瀏覽器對(duì)于不同的方式有不同的解析順序。

//“定義式”函數(shù)定義

function Fn1(){

alert("Hello World!");

}

//“賦值式”函數(shù)定義

var Fn2 = function(){

alert("Hello wild!");

}

頁(yè)面加載過(guò)程中，瀏覽器會(huì)對(duì)頁(yè)面上或載入的每個(gè)js代碼塊(或文件)進(jìn)行掃描，如果遇到定義式函數(shù)，則進(jìn)行預(yù)處理(類似于C等的編譯)，處理完成之后再開(kāi)始由上至下執(zhí)行；遇到賦值式函數(shù)，則只是將函數(shù)賦給一個(gè)變量，不進(jìn)行預(yù)處理(類似1中變量必須先定義后引用的原則)，待調(diào)用到的時(shí)候才進(jìn)行處理。下面舉個(gè)簡(jiǎn)單的例子：

//“定義式”函數(shù)定義

Fn1();

function Fn1(){

alert("Hello World!");

}

正常執(zhí)行，彈出“Hello World!”，瀏覽器對(duì)Fn1進(jìn)行了預(yù)處理，再?gòu)腇n1();開(kāi)始執(zhí)行。

//“賦值式”函數(shù)定義

Fn2();

var Fn2 = function(){

alert("Hello wild!");

}

Firebug報(bào)錯(cuò)：Fn2 is not a function，瀏覽器未對(duì)Fn2進(jìn)行預(yù)處理，依序執(zhí)行，所以報(bào)錯(cuò)Fn2未定義。

3. 代碼塊及js文件的處理

“代碼塊”是指一對(duì)<script type=”text/javascript”></script>標(biāo)簽包裹著的js代碼，文件就是指文件啦，廢話:D

瀏覽器對(duì)每個(gè)塊或文件進(jìn)行獨(dú)立的掃描，然后對(duì)全局的代碼進(jìn)行順序執(zhí)行(2中講到了)。所以，在一個(gè)塊(文件)中，函數(shù)可以在調(diào)用之后進(jìn)行“定義式”定義；但在兩個(gè)塊中，定義函數(shù)所在的塊必須在函數(shù)被調(diào)用的塊之前。

很繞口，看例子好了：

<script type="text/javascript">

Fn();

</script>

<script type="text/javascript">

function Fn(){

alert("Hello World!");

}

</script>

// 報(bào)錯(cuò)：Fn is notdefined，兩個(gè)塊換過(guò)來(lái)就對(duì)了

4. 重復(fù)定義函數(shù)會(huì)覆蓋前面的定義

這和變量的重復(fù)定義是一樣的，代碼：

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函數(shù)與body內(nèi)部函數(shù)的執(zhí)行

body內(nèi)部的函數(shù)會(huì)先于onload的函數(shù)執(zhí)行，測(cè)試代碼：

//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事件觸發(fā)條件是body內(nèi)容加載完成，而body中的js代碼會(huì)在這一事件觸發(fā)之前運(yùn)行(為什么呢?6告訴你..)

6. JavaScript是多線程or單線程？

嚴(yán)格來(lái)說(shuō)，JavaScript是沒(méi)有多線程概念的，所有的程序都是“單線程”依次執(zhí)行的。

舉個(gè)不太恰當(dāng)?shù)睦樱?/P>

function fn1(){

var sum = 0;

for(var ind=0; ind<1000; ind++) {

sum += ind;

}

alert("答案是"+sum);

}

function fn2(){

alert("早知道了，我就是不說(shuō)");

}

fn1();

fn2();

//先彈出：“答案是499500”，

//后彈出：“早知道了，我就是不說(shuō)”

那你肯定要問(wèn)：那延時(shí)執(zhí)行、Ajax異步加載，不是多線程的嗎？沒(méi)錯(cuò)，下面這樣的程序確實(shí)看起來(lái)像“多線程”：

function fn1(){

setTimeout(function(){

alert("我先調(diào)用")

},1000);

}

function fn2(){

alert("我后調(diào)用");

}

fn1();

fn2();

// 先彈出：“我后調(diào)用”，

// 1秒后彈出：“我先調(diào)用”

看上去，fn2()和延時(shí)程序是分兩個(gè)過(guò)程再走，但其實(shí)，這是JavaScript中的“回調(diào)”機(jī)制在起作用，類似于操作系統(tǒng)中的“中斷和響應(yīng)” —— 延時(shí)程序設(shè)置一個(gè)“中斷”，然后執(zhí)行fn2()，待1000毫秒時(shí)間到后，再回調(diào)執(zhí)行fn1()。

同樣，5中body的onload事件調(diào)用的函數(shù)，也是利用了回調(diào)機(jī)制——body加載完成之后，回調(diào)執(zhí)行fnOnLoad()函數(shù)。

Ajax請(qǐng)求中的數(shù)據(jù)處理函數(shù)也是一樣的道理。

關(guān)于JavaScript線程問(wèn)題的更深入討論，看這篇 javascript中的線程之我見(jiàn)，以及infoQ上的 JavaScript多線程編程簡(jiǎn)介。

困了，再說(shuō)一下回調(diào)函數(shù)吧。

7. 回調(diào)函數(shù)

回調(diào)函數(shù)是干嘛用的？就是回調(diào)執(zhí)行的函數(shù)嘛，又廢話:D

如6所說(shuō)，最常見(jiàn)的回調(diào)就是onclick、onmouseover、onmousedown、onload等等瀏覽器事件的調(diào)用函數(shù)；還有Ajax異步請(qǐng)求數(shù)據(jù)的處理函數(shù)；setTimeOut延時(shí)執(zhí)行、setInterval循環(huán)執(zhí)行的函數(shù)等。

干脆我們寫(xiě)一個(gè)純粹的回調(diào)函數(shù)玩：

function onBack(num){

alert("姍姍我來(lái)遲了");

// 執(zhí)行num個(gè)耳光

}

function dating(hours, callBack){

var SP= 0; // SP,憤怒值

//女豬腳在雪里站了hours個(gè)鐘頭

//循環(huán)開(kāi)始..

SP ++;

//循環(huán)結(jié)束...

callBack(SP);

}

dating(1, onBack);

dating運(yùn)行完之后再執(zhí)行回調(diào)函數(shù)onBack —— 約會(huì)結(jié)束了，暴風(fēng)驟雨開(kāi)始了。

今天先寫(xiě)到這里，一些更深入的東西還有待整理，更多的東西還需要繼續(xù)學(xué)習(xí)，歡迎批改補(bǔ)充，歡迎指點(diǎn)迷津。

該文章在 2010/8/14 2:23:20 編輯過(guò)

關(guān)鍵字查詢

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

国产高清在线免费观看-国产高清在线免费无码-国产高清在线男人的天堂-国产高清在线视频-国产高清在线视频精品视频-国产高清在线视频伊甸园