面試題之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）