JavaScript變數範圍詳解

JavaScript變數範圍詳解

變數範圍是程式中定義這個變數的地區。變數的作用範圍又稱為範圍，是指某變數在程式中的有效範圍。根據範圍，變數可以分為全域變數和局部變數。

先貼一段代碼，如果讀者對代碼的輸出並不感到困惑就不用往下面讀了。

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

/*  代碼1  */
var scope = "global ";
function checkScope() {
    var scope = "local ";
    function childCheck() {
        var scope = "childLocal ";
        document.write(scope);
    }
    function childUndefined() {
        document.write(scope);
        var scope;
    }
    function childOverride() {
        scope = "childOverride ";
        document.write(scope);
    }
    document.write(scope);  //輸出"local"
    childCheck();           //輸出"childLocal"
    childUndefined();       //輸出"undefined"
    childOverride();        //輸出"childOverride"
    document.write(scope);  //輸出"childOverride"
}
checkScope();               //輸出"local childLocal undefinedchildOverride childOverride"
document.write(scope);      //輸出"global "

 

全域範圍與局部範圍
全域（global）變數的範圍是全域的，在Javascript中處處有定義；而函數內部聲明的變數是局部（local）變數，其範圍是局部性的，只在函數體內部有定義。對於下面的輸出讀者應不會感到意外。
/*  代碼2  */
var scope = "global";
function checkScope() {
    var scope = "local";
    document.write(scope);
}
checkScope();           //輸出"local"
document.write(scope);  //輸出"global"

 

全域變數範圍中使用變數可以不用var語句，但在聲明局部變數是一定要使用var語句，否則會視為對全域變數的引用。看下面代碼：

/*  代碼3  */
var scope = "global";
function checkScope() {
    scope = "local";
    document.write(scope);
}
checkScope();           //輸出"local"
document.write(scope);  //輸出"local"

 

沒有塊範圍
Javascript沒有塊級範圍，函數中聲明的變數在整個函數中都是有定義的。對於下面的代碼對於生疏的讀者可能頗感意外：

/*  代碼4  */
var scope = "global";
function checkScope() {
    document.write(scope);  //語句4.1
    var scope = "local";    //語句4.2
    document.write(scope);
}
checkScope();           //輸出"undefinedlocal"

 

由於語句4.1（var scope = "local";）聲明的變數在整個checkScope函數範圍內都有效，因此在語句4.2（document.write(scope); ）執行的時scope引用的是局部變數，而此時局部變數scope尚未定義，所以輸出”undefined”。因此一個好的編程習慣是將所有的變數聲明集中起來放在函數的開頭。

在瞭解了上述內容之後，讀者再看看代碼1應該不會感到困惑了。

對象的屬性變數
對象的屬性變數比較容易理解，看一下下面的代碼讀者應該不會感到疑惑。
/*  代碼5  */
var scope = "global ";
var obj = new Object();
obj.scope = "object ";
obj.checkScope = function () {
    var scope = "loacl ";
    document.write(scope);          //輸出"loacl"
    document.write(this.scope);     //輸出"object"
    document.write(window.scope);   //輸出"global"
}
obj.checkScope();   //輸出"loacl object global"

看下下面這段代碼：

<script type="text/網頁特效">
    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>

在函數內部，局部變數的優先順序比同名的全域變數優先順序要高；如果存在與全域變數名稱相同的局部變數，或者在函數內部聲明了與全域變數同名的參數，那麼，該全域變數將不再起作用。如下例子：

<script language="javascript" type="text/javascript">
<!--
 var a = "我是一個全域變數";
 function check()
 {
      var a = "我是一個局部變數";
      document.write(a);
 }
 check();
//-->
</script>
輸出：

我是一個局部變數
       雖然在全域範圍中可以不使用var聲明變數，但在聲明局部變數時，一定要使用var語句。一般情況下，函數並不知道全域範圍中定義了什麼變數，也不知道這些變數的作用。如果函數使用的是全域變數，而不是是局部變數，那麼就可能改變程式其他部分所依賴的全域變數的值。因此，最好在聲明所有變數時都使用var語句。

       JavaScript沒有塊級範圍，函數中聲明的所有變數無論是在哪裡聲明的，在整個函數中都有意義。在下面代碼中，變數i,j,k範圍相同，在整個函數體中都有意義。看下下面例子：

 

<script language="javascript" type="text/javascript">
<!--
 function check()
 {
         var i = 0;
         if(i == 0)
         {
                var j = 1;
                for(var k = 0;k < 1;k ++)
               {
                      document.write("k在迴圈體內的值為：" + k + "<br />");
               }
               document.write("k在迴圈體內的值為：" + k + "<br />");
         }
        document.write("j在if語句外的值為：" + j);
 }
 check();
//-->
</script>
輸出：

k在迴圈體內的值為：0
k在迴圈體內的值為：1
j在if語句外的值為：1