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