DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> JavaScript基礎知識 >> JavaScript執行順序詳細介紹
JavaScript執行順序詳細介紹
編輯:JavaScript基礎知識     

之前從JavaScript引擎的解析機制來探索JavaScript的工作原理,下面我們以更形象的示例來說明JavaScript代碼在頁面中的執行順序。如果說,JavaScript引擎的工作機制比較深奧是因為它屬於底層行為,那麼JavaScript代碼執行順序就比較形象了,因為我們可以直觀感覺到這種執行順序,當然JavaScript代碼的執行順序是比較復雜的,所以在深入JavaScript語言之前也有必要對其進行剖析。
1.1  按HTML文檔流順序執行JavaScript代碼
首先,讀者應該清楚,HTML文檔在浏覽器中的解析過程是這樣的:浏覽器是按著文檔流從上到下逐步解析頁面結構和信息的。JavaScript代碼作為嵌入的腳本應該也算做HTML文檔的組成部分,所以JavaScript代碼在裝載時的執行順序也是根據腳本標簽<script>的出現順序來確定的。例如,浏覽下面文檔頁面,你會看到代碼是從上到下逐步被解析的。

復制代碼 代碼如下:
<script>
alert("頂部腳本");
</script>
<html><head>
<script>
alert("頭部腳本");
</script>
<title></title>
</head>
<body>
<script>
alert("頁面腳本");
</script>
</body></html>
<script>
alert("底部腳本");
</script>

如果通過腳本標簽<script>的src屬性導入外部JavaScript文件腳本,那麼它也將按照其語句出現的順序來執行,而且執行過程是文檔裝載的一部分。不會因為是外部JavaScript文件而延期執行。例如,把上面文檔中的頭部和主體區域的腳本移到外部JavaScript文件中,然後通過src屬性導入。繼續預覽頁面文檔,你會看到相同的執行順序。
復制代碼 代碼如下:
<script>

alert("頂部腳本");

</script>

<html>

<head>

<script src="http://www.jb51.net/head.js"></script>

<title></title>

</head>

<body>

<script src="http://www.jb51.net/body.js"></script>

</body>

</html>

<script>

alert("底部腳本");

</script>

1.2  預編譯與執行順序的關系

在Javascript中,function才是Javascript的第一型。當我們寫下一段函數時,其實不過是建立了一個function類型的實體。
就像我們可以寫成這樣的形式一樣:
復制代碼 代碼如下:
functionHello()
{
alert("Hello");
}
Hello();
varHello = function()
{
alert("Hello");
}
Hello();

其實都是一樣的。 但是當我們對其中的函數進行修改時,會發現很奇怪的問題。
復制代碼 代碼如下:
<scripttype="text/javascript">       
functionHello() {        
alert("Hello");  
}       
Hello();     
functionHello() {  
alert("Hello World");   
}       
Hello();   
</script>

我們會看到這樣的結果:連續輸出了兩次Hello World。
而非我們想象中的Hello和Hello World。
這是因為Javascript並非完全的按順序解釋執行,而是在解釋之前會對Javascript進行一次“預編譯”,在預編譯的過程中,會把定義式的函數優先執行,也會把所有var變量創建,默認值為undefined,以提高程序的執行效率。
也就是說上面的一段代碼其實被JS引擎預編譯為這樣的形式:
復制代碼 代碼如下:
<scripttype="text/javascript">       
varHello = function() {          
alert("Hello");       
}      
Hello = function() {
           alert("Hello World"); 
      }     
Hello();    
Hello(); 
</script>

我們可以通過上面的代碼很清晰地看到,其實函數也是數據,也是變量,我們也可以對“函數“進行賦值(重賦值)。
當然,我們為了防止這樣的情況,也可以這樣:
復制代碼 代碼如下:
<scripttype="text/javascript">     
functionHello() {       
alert("Hello");      
}       
Hello(); 
</script>  
<scripttype="text/javascript">  
functionHello() {         
alert("Hello World");    
}      
Hello(); 
</script>

這樣,程序被分成了兩段,JS引擎也就不會把他們放到一起了。   

當JavaScript引擎解析腳本時,它會在預編譯期對所有聲明的變量和函數進行處理。

做如下處理:

1. 在執行前會進行類似“預編譯”的操作:首先會創建一個當前執行環境下的活動對象,並將那些用var申明的變量設置為活動對象的屬性,但是此時這些變量的賦值都是undefined,並將那些以function定義的函數也添加為活動對象的屬性,而且它們的值正是函數的定義。

2. 在解釋執行階段,遇到變量需要解析時,會首先從當前執行環境的活動對象中查找,如果沒有找到而且該執行環境的擁有者有prototype屬性時則會從prototype鏈中查找,否則將會按照作用域鏈查找。遇到var a = ...這樣的語句時會給相應的變量進行賦值(注意:變量的賦值是在解釋執行階段完成的,如果在這之前使用變量,它的值會是undefined) 所以,就會出現當JavaScript解釋器執行下面腳本時不會報錯:

復制代碼 代碼如下:
alert(a);                            // 返回值undefined

var a =1;

alert(a);                            // 返回值1

由於變量聲明是在預編譯期被處理的,所以在執行期間對於所有代碼來說,都是可見的。但是,你也會看到,執行上面代碼,提示的值是undefined,而不是1。這是因為,變量初始化過程發生在執行期,而不是預編譯期。在執行期,JavaScript解釋器是按著代碼先後順序進行解析的,如果在前面代碼行中沒有為變量賦值,則JavaScript解釋器會使用默認值undefined。由於在第二行中為變量a賦值了,所以在第三行代碼中會提示變量a的值為1,而不是undefined。

同理,下面示例在函數聲明前調用函數也是合法的,並能夠被正確解析,所以返回值為1。

復制代碼 代碼如下:
f();                                 // 調用函數,返回值1

function f(){

    alert(1);

}

但是,如果按下面方式定義函數,則JavaScript解釋器會提示語法錯誤。

復制代碼 代碼如下:
f();                                 // 調用函數,返回語法錯誤

var f = function(){

    alert(1);

}

這是因為,上面示例中定義的函數僅作為值賦值給變量f,所以在預編譯期,JavaScript解釋器只能夠為聲明變量f進行處理,而對於變量f的值,只能等到執行期時按順序進行賦值,自然就會出現語法錯誤,提示找不到對象f。

再見一些例子:

復制代碼 代碼如下:
<script type="text/javascript">

/*在預編譯過程中func是window環境下的活動對象中的一個屬性,值是一個函數,覆蓋了undefined值*/

alert(func); //function func(){alert("hello!")}

var func = "this is a variable"

function func(){

alert("hello!")

}

/*在執行過程中遇到了var重新賦值為"this is a variable"*/

alert(func);  //this is a variable

</script>

復制代碼 代碼如下:
<script type="text/javascript">
var name = "feng"; function func()
{
/*首先,在func環境內先把name賦值為undefined,然後在執行過程中先尋找func環境下的活動對象的name屬性,此時之前已經預編譯值為undefined,所以輸出是undefined,而不是feng*/
alert(name);  //undefined var name = "JSF";
alert(name);  //JSF
}
func();
alert(name);
//feng
</script>

雖然變量和函數聲明可以在文檔任意位置,但是良好的習慣應該是在所有JavaScript代碼之前聲明全局變量和函數,並對變量進行初始化賦值。在函數內部也是先聲明變量,然後再引用。

1.3  按塊執行JavaScript代碼

所謂代碼塊就是使用<script>標簽分隔的代碼段。例如,下面兩個<script>標簽分別代表兩個JavaScript代碼塊。

復制代碼 代碼如下:
<script>

// JavaScript代碼塊1

var a =1;

</script>

<script>

// JavaScript代碼塊2

function f(){

    alert(1);

}

</script>

JavaScript解釋器在執行腳本時,是按塊來執行的。通俗地說,就是浏覽器在解析HTML文檔流時,如果遇到一個<script>標簽,則JavaScript解釋器會等到這個代碼塊都加載完後,先對代碼塊進行預編譯,然後再執行。執行完畢後,浏覽器會繼續解析下面的HTML文檔流,同時JavaScript解釋器也准備好處理下一個代碼塊。

由於JavaScript是按塊執行的,所以如果在一個JavaScript塊中調用後面塊中聲明的變量或函數就會提示語法錯誤。例如,當JavaScript解釋器執行下面代碼時就會提示語法錯誤,顯示變量a未定義,對象f找不到。

復制代碼 代碼如下:
<script>

// JavaScript代碼塊1

alert(a);

f();

</script>

<script>

// JavaScript代碼塊2

var a =1;

function f(){

    alert(1);

}

</script>

雖然說,JavaScript是按塊執行的,但是不同塊都屬於同一個全局作用域,也就是說,塊之間的變量和函數是可以共享的。

1.4  借助事件機制改變JavaScript執行順序

由於JavaScript是按塊處理代碼,同時又遵循HTML文檔流的解析順序,所以在上面示例中會看到這樣的語法錯誤。但是當文檔流加載完畢,如果再次訪問就不會出現這樣的錯誤。例如,把訪問第2塊代碼中的變量和函數的代碼放在頁面初始化事件函數中,就不會出現語法錯誤了。

復制代碼 代碼如下:
<script>

// JavaScript代碼塊1

window.onload = function(){        // 頁面初始化事件處理函數

    alert(a);

    f();

}

</script>

<script>

// JavaScript代碼塊2

var a =1;

function f(){

    alert(1);

}

</script>

為了安全起見,我們一般在頁面初始化完畢之後才允許JavaScript代碼執行,這樣可以避免網速對JavaScript執行的影響,同時也避開了HTML文檔流對於JavaScript執行的限制。

注意

如果在一個頁面中存在多個windows.onload事件處理函數,則只有最後一個才是有效的,為了解決這個問題,可以把所有腳本或調用函數都放在同一個onload事件處理函數中,例如:

復制代碼 代碼如下:
window.onload = function(){

    f1();

    f2();

    f3();

}

而且通過這種方式可以改變函數的執行順序,方法是:簡單地調整onload事件處理函數中調用函數的排列順序。

除了頁面初始化事件外,我們還可以通過各種交互事件來改變JavaScript代碼的執行順序,如鼠標事件、鍵盤事件及時鐘觸發器等方法,詳細講解請參閱第14章的內容。

1.5  JavaScript輸出腳本的執行順序

在JavaScript開發中,經常會使用document對象的write()方法輸出JavaScript腳本。那麼這些動態輸出的腳本是如何執行的呢?例如:

復制代碼 代碼如下:
document.write('<script type="text/javascript">');

document.write('f();');

document.write('function f(){');

document.write('alert(1);');

document.write('}');

document.write('</script>');

運行上面代碼,我們會發現:document.write()方法先把輸出的腳本字符串寫入到腳本所在的文檔位置,浏覽器在解析完document.write()所在文檔內容後,繼續解析document.write()輸出的內容,然後才按順序解析後面的HTML文檔。也就是說,JavaScript腳本輸出的代碼字符串會在輸出後馬上被執行。

請注意,使用document.write()方法輸出的JavaScript腳本字符串必須放在同時被輸出的<script>標簽中,否則JavaScript解釋器因為不能夠識別這些合法的JavaScript代碼,而作為普通的字符串顯示在頁面文檔中。例如,下面的代碼就會把JavaScript代碼顯示出來,而不是執行它。

復制代碼 代碼如下:
document.write('f();');

document.write('function f(){');

document.write('alert(1);');

document.write(');');

但是,通過document.write()方法輸出腳本並執行也存在一定的風險,因為不同JavaScript引擎對其執行順序不同,同時不同浏覽器在解析時也會出現Bug。

Ø 問題一,找不到通過document.write()方法導入的外部JavaScript文件中聲明的變量或函數。例如,看下面示例代碼。

復制代碼 代碼如下:
document.write('<script type="text/javascript" src="http://www.jb51.net/test.js">

</script>');

document.write('<script type="text/javascript">');

document.write('alert(n);');  // IE提示找不到變量n

document.write('</script>');

alert(n+1);                          // 所有浏覽器都會提示找不到變量n

外部JavaScript文件(test.js)的代碼如下:
復制代碼 代碼如下:
var n = 1;

分別在不同浏覽器中進行測試,會發現提示語法錯誤,找不到變量n。也就是說,如果在JavaScript代碼塊中訪問本代碼塊中使用document.write()方法輸出的腳本中導入的外部JavaScript文件所包含的變量,會顯示語法錯誤。同時,如果在IE浏覽器中,不僅在腳本中,而且在輸出的腳本中也會提示找不到輸出的導入外部JavaScript文件的變量(表述有點長和繞,不懂的讀者可以嘗試運行上面代碼即可明白)。

Ø 問題二,不同JavaScript引擎對輸出的外部導入腳本的執行順序略有不同。例如,看下面示例代碼。

復制代碼 代碼如下:
<script type="text/javascript">

document.write('<script type="text/javascript" src="http://shaozhuqing.com/test1.js">

</script>');

document.write('<script type="text/javascript">');

document.write('alert(2);')

document.write('alert(n+2);');

document.write('</script>');

</script>

<script type="text/javascript">

alert(n+3);

</script>

外部JavaScript文件(test1.js)的代碼如下所示。
復制代碼 代碼如下:
var n = 1;

alert(n);

在IE浏覽器中的執行順序如圖1-6所示。

圖1-6  IE 7浏覽器的執行順序和提示的語法錯誤

在符合DOM標准的浏覽器中的執行順序與IE浏覽器不同,且沒有語法錯誤,如圖1-7所示的是在Firefox 3.0浏覽器中的執行順序。

圖1-7  Firefox 3浏覽器的執行順序和提示的語法錯誤

解決不同浏覽器存在的不同執行順序,以及可能存在Bug。我們可以把凡是使用輸出腳本導入的外部文件,都放在獨立的代碼塊中,這樣根據上面介紹的JavaScript代碼塊執行順序,就可以避免這個問題。例如,針對上面示例,可以這樣設計:

復制代碼 代碼如下:
<script type="text/javascript">

document.write('<script type="text/javascript" src="http://www.jb51.net/test1.js"></script>');

</script>

<script type="text/javascript">

document.write('<script type="text/javascript">');

document.write('alert(2);') ; // 提示2

document.write('alert(n+2);'); // 提示3

document.write('</script>');

alert(n+3); // 提示4

</script>

<script type="text/javascript">

alert(n+4); // 提示5

</script>

這樣在不同浏覽器中都能夠按順序執行上面代碼,且輸出順序都是1、2、3、4和5。存在問題的原因是:輸出導入的腳本與當前JavaScript代碼塊之間的矛盾。如果單獨輸出就不會發生沖突了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved