JavaScript的變量做用域

在學習JavaScript的變量做用域以前，咱們應當明確幾點：

• JavaScript的變量做用域是基於其特有的做用域鏈的。
• JavaScript沒有塊級做用域。
• 函數中聲明的變量在整個函數中都有定義。

一、JavaScript的做用域鏈

首先看下下面這段代碼：

<script type="text/javascript"> var rain = 1;     function rainman(){     var man = 2;     function inner(){     var innerVar = 4;      alert(rain);     }     inner(); //調用inner函數     }     rainman(); //調用rainman函數 </script>

觀察alert(rain);這句代碼。JavaScript首先在inner函數中查找是否認義了變量rain，若是定義了則使用inner函數中的rain變量；若是inner函數中沒有定義rain變量，JavaScript則會繼續在rainman函數中查找是否認義了rain變量，在這段代碼中rainman函數體內沒有定義rain變量，則JavaScript引擎會繼續向上（全局對象）查找是否認義了rain；在全局對象中咱們定義了rain = 1，所以最終結果會彈出'1'。

做用域鏈：JavaScript須要查詢一個變量x時，首先會查找做用域鏈的第一個對象，若是以第一個對象沒有定義x變量，JavaScript會繼續查找有沒有定義x變量，若是第二個對象沒有定義則會繼續查找，以此類推。

上面的代碼涉及到了三個做用域鏈對象，依次是：inner、rainman、window。

二、函數體內部，局部變量的優先級比同名的全局變量高。

<script type="text/javascript">     var rain = 1; //定義全局變量 rain     function check(){     var rain = 100; //定義局部變量rain     alert( rain ); //這裏會彈出 100     }     check();     alert( rain ); //這裏會彈出1 </script>

三、JavaScript沒有塊級做用域。

這一點也是JavaScript相比其它語言較靈活的部分。

仔細觀察下面的代碼，你會發現變量i、j、k做用域是相同的，他們在整個rain函數體內都是全局的。

<script type="text/javascript">     function rainman(){      // rainman函數體內存在三個局部變量 i j k      var i = 0;      if ( 1 ) {      var j = 0;      for(var k = 0; k < 3; k++) {      alert( k ); //分別彈出 0 1 2      }      alert( k ); //彈出3      }      alert( j ); //彈出0     } </script>

四、函數中聲明的變量在整個函數中都有定義。

首先觀察這段代碼：

<script type="text/javascript">     function rain(){      var x = 1;      function man(){      x = 100;      }      man(); //調用man      alert( x ); //這裏會彈出 100     }     rain(); //調用rain </script>

上面得代碼說明了，變量x在整個rain函數體內均可以使用，並能夠從新賦值。因爲這條規則，會產生「匪夷所思」的結果，觀察下面的代碼。

<script type="text/javascript">     var x = 1;     function rain(){      alert( x ); //彈出 'undefined'，而不是1      var x = 'rain-man';      alert( x ); //彈出 'rain-man'     }     rain(); </script>

是因爲在函數rain內局部變量x在整個函數體內都有定義（ var x= 'rain-man'，進行了聲明），因此在整個rain函數體內隱藏了同名的全局變量x。這裏之因此會彈出'undefined'是由於，第一個執行alert(x)時，局部變量x仍未被初始化。

因此上面的rain函數等同於下面的函數：

function rain(){ var x; alert( x ); x = 'rain-man'; alert( x ); }

五、未使用var關鍵字定義的變量都是全局變量。

<script type="text/javascript">     function rain(){      x = 100; //聲明瞭全局變量x並進行賦值     }     rain();     alert( x ); //會彈出100 </script>

這也是JavaScript新手常見的錯誤，無心之中留下的許多全局變量。

六、全局變量都是window對象的屬性

<script type="text/javascript">     var x = 100 ;     alert( window.x );//彈出100     alert(x); </script>

等同於下面的代碼

<script type="text/javascript">     window.x = 100;     alert( window.x );     alert(x) </script>