頁面中多個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>