91精品国产9l久久久久,开心色播五月,国产无毛

JavaScript程序執行順序問題總結

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

admin

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

好記星不如爛筆頭，適時的總結梳理知識讓人更輕松愉快。今天總結下學習和開發中遇到的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 —— 約會結束了，暴風驟雨開始了。

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

該文章在 2010/8/14 2:23:20 編輯過

關鍵字查詢

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区