深入理解JavaScript的變數範圍

最後更新：2018-12-05 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

文章目錄

1、JavaScript的範圍鏈
2、函數體內部，局部變數的優先順序比同名的全域變數高。
3、JavaScript沒有塊級範圍。
4、函數中聲明的變數在整個函數中都有定義。
5、未使用var關鍵字定義的變數都是全域變數。
6、全域變數都是window對象的屬性
1、JavaScript的範圍鏈
2、函數體內部，局部變數的優先順序比同名的全域變數高。
3、JavaScript沒有塊級範圍。
4、函數中聲明的變數在整個函數中都有定義。
5、未使用var關鍵字定義的變數都是全域變數。
6、全域變數都是window對象的屬性

深入理解JavaScript的變數範圍

在學習JavaScript的變數範圍之前，我們應當明確幾點：

JavaScript的變數範圍是基於其特有的範圍鏈的。
JavaScript沒有塊級範圍。
函數中聲明的變數在整個函數中都有定義。

1、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。

2、函數體內部，局部變數的優先順序比同名的全域變數高。

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

3、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>

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

首先觀察這段代碼：

<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 );}

5、未使用var關鍵字定義的變數都是全域變數。

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

這也是JavaScript新手常見的錯誤，無意之中留下的許多全域變數。

6、全域變數都是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>

轉自：http://www.cnblogs.com/rainman/archive/2009/04/28/1445687.html