頁面中多個script塊之間的關係

一：函式宣告與函式定義表示式在函式呼叫間的區別

<script type="text/javascript">  

    doA();

    var doA = function(argument) {
        console.log('執行了')
    }
</script>

結果：

<script type="text/javascript">  
    doA();
    function  doA(argument) {
        console.log('執行了')
    }
</script>  

結果：執行了

結論：函式宣告在編譯期處理了函式宣告，但是函式定義表示式並沒有初始化與賦值。類似宣告瞭一個變數，但是變數沒有賦值。

二：多個script之間對於變數的關係

JS是按照程式碼塊來進行編譯和執行的，程式碼塊間相互獨立，但變數和方法共享。

<script type="text/javascript">  
    function  doA(argument) {
        console.log('執行了')
    }
</script>  
<script type="text/javascript">
     doA();
</script>

結果：執行了

**如果兩個函式塊之間更換位置，那就會報錯。

<script type="text/javascript">  
   var a = 0;
</script>  
<script type="text/javascript">
    console.log(a);
</script>

結果：0

**如果兩個函式塊之間更換位置，那就會報錯。

三：這樣就造成了一個問題，當我們一個頁面中引入多個js的時候，可能會造成全域性變數的汙染。

我們可以這麼做來避免：

<script type="text/javascript">  
   var a = 0;
</script>  
<script type="text/javascript">
    ;(function(){
        var a = 1;
        console.log(a);
    })();
    console.log(a);
</script>

結果：1
0

或者我們直接用函式來做：

<script type="text/javascript">  
function  bigDoA(argument) {
    var a = 0;
    //其他程式碼
} 
</script>  
<script type="text/javascript">
function  bigDoB(argument) {
    var a = 0;
    //其他程式碼
}
</script>

---

javaScript直譯器在執行指令碼時，是按塊來執行的。通俗地說，就是瀏覽器在解析HTML文件流時，如果遇到一個<script>標籤，則JavaScript直譯器會等到這個程式碼塊都載入完後，先對程式碼塊進行預編譯，然後再執行。執行完畢後，瀏覽器會繼續解析下面的HTML文件流，同時JavaScript直譯器也準備好處理下一個程式碼塊。

雖然說，JavaScript是按塊執行的，但是不同塊都屬於同一個全域性作用域，也就是說，塊之間的變數和函式是可以共享的。 這也是第二段程式碼為什麼可以訪問前一個塊裡的a的原因。

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

step 2. 做語法分析，有錯則報語法錯誤（比如括號不匹配等），並跳轉到step5。

step 3. 對var變數和function定義做“預編譯處理”（永遠不會報錯的，因為只解析正確的宣告）。

step 4. 執行程式碼段，有錯則報錯（比如變數未定義）。

step 5. 如果還有下一個程式碼段，則讀入下一個程式碼段，重複step2。

step6. 結束。