JavaScript中的坑--全局變量惹得禍

js中變量的作用域及閉包的概念

 

概述

身為一名程序員，因為bug周末加班是必不可少的事情，當解決bug的時候，總有些bug是因為規范導致的，但是這些bug往往不好找，也就是“前人挖坑，后人好踩”。前段時間，出現了一個很莫名其妙的bug

就是有個模塊頁面數據不對。當時找了半天（以為是頁面傳值的問題），到最后才發現 主頁面引用的幾個js文件中存在一個相同的全局變量。

 

對js中的變量作用域的誤解 

很多寫js的都是需要前后台一起寫的，我就是后台java,前台js分模塊一起寫的。在這里，我有一個誤區，就是以為js和java中的語法是一樣的。但實際上還是存在着一些不同的地方。比如js中作用域只是函數級別的

　　　1：在{}體內定義的局部變量，和在{}體外定義的局部變量 實際上是一個，並不會新建

　　　2：在函數體內定義的局部變量 ，和函數體外定義的沒什么關系。

方便記憶的代碼如下：

 <script>
             var test_id = "my love";
              if(true){
                  console.log(test_id);
                  var test_id = "where my love?";
                  console.log(test_id);
              }
              console.log(test_id);
         </script>

 

顯示結果：

　　

這就是js中沒有塊級作用域的證明： 很顯然發現test_id實際上只有一個

證明js中變量是函數級別的

 <script>
             var test_id = "my love";
              function findLove(){
                  var test_id ;
                  console.log(test_id);
                  test_id = "is you?";
                  console.log(test_id);
              }
              findLove();
              console.log(test_id);
         </script>

 

輸出結果：

 

然后我試了一下： 在{}體內不用var聲明：

<script>
             var a = "heh"
             if(true){
                 console.log(a);
             }
         </script>

 

其實也是可以的 輸出 heh

試一下 函數體內部用var ，注意一下：代碼不同之處

 <script>
             var a = "heh"
             function findLove(){
                 console.log(a);
             }
             findLove();
         </script>

 

  <script>
             var a = "heh"
             function findLove(){
                 console.log(a);
                 var a
             }
             findLove();
         </script>

 

 第一個輸出的是 heh ;第二個輸出的是 undifined,一目了然。這個地方 還有一個細節：就是在函數體內，先定義后打印和先打印和定義，實際上是一樣。

自我測試一下吧：（猜一下輸出結果，在驗證一下吧）

 <script>
             var a = "heh"
             function findLove(){
                 console.log(a);
                 function findforyou(){
                     var a ="you";
                     console.log(a);
                 }
                 function findother(){
                     console.log(a)
                 }
                 findforyou();
                 findother();
             }
             findLove();
         </script>

 

 

 

二：函數閉包

　　因為js中變量的作用域是函數級的，所以用閉包來解決一些傳值問題（比如遞歸）。篇幅太長了，另起一篇博客

 

總結

　　新人，發自肺腑的總結，希望可以幫助到你。另外，也希望可以多多支持，轉載說明出處，謝了。必當結草銜環，勤懇不往初心

參考資料 

參考自下面的博客： 學習的時候，不建議直接去看作用域啥的。就是自己找個編輯器，試一下，一目了然。

http://blog.csdn.net/yueguanghaidao/article/details/9568071