深入理解JavaScript變數範圍

標籤：script   bsp   基於   全域變數   code   使用   blog   for   結果   

　　JS變數範圍特點：

　　a、JS變數範圍是基於其特有的範圍鏈的。

　　b、JavaScript沒有塊級範圍。

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

1、範圍鏈

var rain = 1 ;function rainman(){     var man = 2 ;     function inner(){        var innerVar = 4;        alert(rain);    }    inner();     // 調用inner函數 }rainman();     // 調用rainman函數 

　　觀察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、函數體內部，局部變數的優先順序比同名的全域變數高。

var rain = 1 ;     // 定義全域變數 rain function check(){    var rain = 100 ;  // 定義局部變數rain     alert(rain);     // 這裡會彈出 100 }check();alert(rain);     // 這裡會彈出1 

3、JavaScript沒有塊級範圍。

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

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

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 );     // 在for迴圈外，卻依然彈出3     }    alert(j);     // 在if語句外，卻依然彈出0 }

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

　　聲明前置規則：聲明會提前，但是賦值仍是在賦值的那行代碼上賦值；在此之前都為undefined

function  rain(){    var  x  =   1 ;    function  man(){        x  =   100 ;    }    man();     // 調用man     alert( x );     // 這裡會彈出 100 }rain();     // 調用rain 

　　上面得代碼說明了，變數x在整個rain函數體內都可以使用，並可以重新賦值（當然函數內部不調用man()方法，x 還是彈出 1 咯）。由於這條規則，會產生 “ 匪夷所思 ” 的結果，觀察下面的代碼。

var  x  =   1 ;function  rain(){    alert( x );     // 彈出 ‘undefined‘，而不是1     var  x  =   ‘ rain-man ‘ ;    alert( x );     // 彈出 ‘rain-man‘ }rain()

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

　　所以上面代碼等價於：

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

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

function  rain(){    x  =   100 ;     // 聲明了全域變數x並進行賦值 }rain();alert( x );     // 會彈出100 

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

6、全域變數都是window對象的屬性

var  x  =   100  ;alert( x === window.x ); // 彈出true

 

深入理解JavaScript變數範圍