面试题之JavaScript 的全局变量与局部变量

先看一道面试题

问：如下代码结果是？

<script type="text/javascript">
  var a = 100 ;
  function test() {
    alert(a) ;
    var a = 10 ;
    alert(a) ;
  }
  test() ;
  alert(a) ;
</script>

大家猜结果等于多少？是弹出顺序100 10 100 吗？基础不好的或者受到Java语法的影响，果断填上弹出顺序100 10 100 ，那就大错特错了。其实不然，结果是：弹出顺序 undefined 10 100 。

代码详细讲解

<script type="text/javascript">
  var a = 100 ;  //声明全局变量a,并为其赋值。
  function test() {
    alert(a) ;   //此处a为undefined! 这个a并不是全局变量，这是因为在function 范围里已经声明了一个重名的局部变量,  
                 //所以全局变量a被覆盖了，这说明了Javascript在执行前会对整个脚本文件的定义部分做完整分析,所以在函数test()执行前,  
                 //函数体中的变量a就被指向内部的局部变量.而不是指向外部的全局变量. 但这时a只有声明，还没赋值，所以输出undefined。 
    var a = 10 ; //声明局部变量a,并为其赋值。
    alert(a) ;   //此处a为10,这里的a是局部变量。  
  }
  test() ;       //调用test()方法
  alert(a) ;     //此处a为100,这里的a是全局变量。 
</script>

现在，大家明白了吧！！！

引申

引申1 下面代码结果是：

<script type="text/javascript">
  while(true){
       var i = 1;
       break;
   }
   alert(i);
</script>

结果并不是语法错误找不到 i，而是 弹出 1。

结论：Javascript的变量的范围是根据方法块来划分的（也就是说以function的一对大括号｛ ｝来划分）。切记，是function块，而for、while、if块并不是作用域的划分标准。

引申2 下面代码结果是：

<script type="text/javascript">
   var i = 100 ;
   function test() {
    alert(i) ;
    i = 50 ;
    alert(i)
    var i = 10 ;
    alert(i) ;
   }
   test() ;
   alert(i);
</script>

结果是：依次弹出 undefined 50 10 100

结论：Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)，从而确定实变量的作用域。

引申3 下面代码结果是：

<script type="text/javascript">
   var i = 100 ;
   function test() {
    alert(window.i) ;
    var i = 10 ;
    alert(i) ;
   }
   test() ;
   alert(i);
</script>

结果是：依次弹出 100 10 100

结论：当全局变量跟局部变量重名时，局部变量的范围会覆盖掉全局变量的范围。若想指定是全局变量可以使用 window.globalVariableName。

总结

综上所述：

1.Javascript在执行前会对整个脚本文件的声明部分做完整分析(包括局部变量)，从而确定实变量的作用域。
2.Javascript的变量的范围是根据方法块来划分的（也就是说以function的一对大括号｛ ｝来划分）。切记，是function块，而for、while、if块并不是作用域的划分标准。
3.当全局变量跟局部变量重名时，局部变量的范围会覆盖掉全局变量的范围，当离开局部变量的范围后，又重回到全局变量的范围。（若想指定是全局变量可以使用 window.globalVariableName）

转自：https://blog.csdn.net/wenteryan/article/details/51480225