深入理解javascript的執行順序_基礎知識

如果你無法理解javaScript語言的運作機制，或者簡單地說，你不能掌握javascript的執行順序，那你就猶如伯樂駕馭不了千里馬，讓千里馬脫韁而出，四處亂竄。

那麼JavaScript是怎麼來進行解析的嗎？它的執行順序又是如何的呢？在了解這些之前，我們先來認識幾個重要的術語：

1、程式碼區塊
JavaScript中的程式碼區塊是指由<script>標籤分割的程式碼段。例如：<BR><div class="codetitle"><span><a style="CURSOR: pointer" data="50623" class="copybut" id="copybut50623" onclick="doCopy('code50623')"><U>複製程式碼 程式碼如下:<div class="codebody" id="code50623"><BR><script type="text/javascript"> <BR>      alert("這是程式碼區塊一");<BR></script>

JS是按照程式碼區塊來進行編譯和執行的，程式碼區塊間相互獨立，但變數和方法共享。什麼意思呢? 舉個例子，你就明白了：

複製代碼 代碼如下:

代碼如下:

上面的程式碼區塊一中運行報錯，但不影響程式碼區塊二的執行，這就是程式碼區塊間的獨立性，而程式碼區塊二中能呼叫到程式碼一中的變量，則是塊間共享性。

2、宣告式函數與賦值式函數

JS中的函數定義分為兩種：聲明式函數與賦值函數。

複製代碼

代碼如下:

     var Fn = function{ >
宣告式函數與賦值式函數的差別在於：在JS的預編譯期，宣告式函數會先被擷取出來，然後再依序執行js程式碼。

3、預編譯期與執行期間

事實上，JS的解析過程分為兩個階段：預編譯期(預處理)與執行期。

預編譯期JS會對本程式碼區塊中的所有宣告的變數和函數進行處理（類似與C語言的編譯），但需要注意的是此時處理函數的只是宣告式函數，而且變數也只是進行了聲明但未進行初始化以及賦值。

複製程式碼 程式碼如下:

 


//程式碼區塊一
//程式碼區塊二

//js在預處理期對變數進行了聲明處理,但是並沒有進行初始化與賦值，所以導致程式碼區塊二中的變數是unfiened的，而程式碼一中的變數是完全不存在的，所以瀏覽器報錯。


理解了上面的幾個術語，相信大家對JS的運作機制已經有了個大概的印象了，現在我們來看個例子：

複製程式碼

程式碼如下:      Fn(); >

為什麼運行上面的程式碼瀏覽器會報錯呢？宣告函數不是會在預處理期就會被處理了嗎，怎麼還會找不到Fn()函數呢？其實這是一個理解誤點，我們上面說了JS引擎是按照程式碼區塊來順序執行的，其實完整的說應該是按照程式碼區塊來進行預處理和執行的，也就是說預處理的只是執行到的程式碼區塊的宣告函數和變量，而對於還未載入的程式碼區塊，是沒法進行預處理的，這也是邊編譯邊處理的核心所在。

現在，讓我們來總結整理下：

複製程式碼

程式碼如下:

程式碼如下:

step 1.  讀入第一個程式碼區塊。

　　step 2.  做語法分析，有錯誤則報語法錯誤（例如括號不符等），並跳到step5。
　　step 3.  對var變數和function定義做「預編譯處理」（永遠不會報錯的，因為只解析正確的宣告）。
　　step 4.  執行程式碼段，有錯誤則報錯（例如變數未定義）。
　　step 5.  如果還有下一個程式碼段，則讀入下一個程式碼段，重複step2。
　　step6. 結束。


而根據HTML文檔流的執行順序，需要在頁面元素渲染前執行的js程式碼應該放在前面的<script>程式碼區塊中，而需要在頁面元素載入完後的js放在元素後面，body標籤的onload事件是在最後執行的。 </script>

複製代碼 代碼如下: