页面中多个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>