js學習--變數作用域_ZenDei技術網路在線

作為一名菜鳥的我，每天學點的感覺還是不錯的。今天學習閉包的過程中看到作用域與作用域鏈這兩個概念，我覺得作為一名有追求的小白，有必要詳細瞭解下。變數的作用域就js變數而言，有全局變數和局部變數。這裡我覺得這個按字面意思理解就行了.......下麵舉個例子這邊有2個很有意思的地方 1.當變數不用v ...

作為一名菜鳥的我，每天學點的感覺還是不錯的。今天學習閉包的過程中看到作用域與作用域鏈這兩個概念，我覺得作為一名有追求的小白，有必要詳細瞭解下。

變數的作用域

就js變數而言，有全局變數和局部變數。這裡我覺得這個按字面意思理解就行了.......下麵舉個例子

var message = "今天我做的糯米蒸排骨"; //定義一個全局變數

function doL(){

　　var ss = "俠客行很好看";      //定義一個局部變數

　　alert(message);             //輸出"今天我做的糯米蒸排骨",在函數中可以引用到全局變數

　　function alertDo(){

　　　　alert(ss);

　　}

　　alertDo();             //輸出"俠客行很好看",這就涉及變數的作用域了

};
doL();
alertDo();              //沒法輸出  alertDo is not defined

alert(message);         //可以輸出"今天我做的糯米蒸排骨"

這邊有2個很有意思的地方

1.當變數不用var聲明的時候我們實際上聲明瞭一個全局變數，好吧，這是錯誤的,看下麵，num是一個全局變數，

而 mum = 1；

事實上是對屬性賦值操作。首先，它會嘗試在當前作用域鏈（如在方法中聲明，則當前作用域鏈代表全局作用域和方法局部作用域etc。。。）中解析 mum ；如果在任何當前作用域鏈中找到mum ，則會執行對mum 屬性賦值；如果沒有找到mum ，它才會在全局對象（即當前作用域鏈的最頂層對象，如window對象）中創造mum 屬性並賦值。

註意！它並不是聲明瞭一個全局變數，而是創建了一個全局對象的屬性。由於變數聲明自帶不可刪除屬性，比較var num = 1 跟 num = 1，前者是變數聲明，帶不可刪除屬性，因此無法被刪除；後者為全局變數的一個屬性，因此可以從全局變數中刪除。

var num =1;
mum = 1;

2.變數聲明會提前到函數頂部，其實之前已經遇到過了

    var scope="global";  
    function t(){  
        console.log(scope);  
        var scope="local"  
        console.log(scope);  
    }  
    t();

它首先會輸出undefined,然後才是scope，它會將變數提前聲明並且覆蓋局部變數，等價於下麵這種情況

    var scope="global";  
    function t(){  
        var scope；
        console.log(scope);  
        scope="local"  
        console.log(scope);  
    }  
    t();

另外，在js中是沒有塊作用域這麼一說的

例如

if（true）
{
    var ss = 1;
}
alert(ss);        //這邊是可以正常輸出的，和java不太一樣

變數的作用域鏈

作用域鏈：由於js的變數都是對象的屬性，而該對象可能又是其它對象的屬性，而所有的對象都是window對象的屬性，所以這些對象的關係可以看作是一條鏈
鏈頭就是變數所處的對象，鏈尾就是window對象

舉個例子吧

function a(){
   var q = 1;
   function b(){
       var w = 2;
   }                
}

js中函數也是對象，所以變數q所在的對象是a，a又在window對象中，所以q的作用域鏈如下
a--window
那麼w所以在的對象即b，b又包含在a中，a又在window對象，所以w的作用域鏈如下
b--a--window

函數的作用域鏈

在JavaScript中，函數也是對象，實際上，JavaScript里一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創建的作用域中對象的集合，這個集合被稱為函數的作用域鏈，它決定了哪些數據能被函數訪問。

當一個函數創建後，它的作用域鏈會被創建此函數的作用域中可訪問的數據對象填充。例如定義下麵這樣一個函數：

function add(num1,num2) {
    var sum = num1 + num2;
    return sum;
}

在函數add創建時，它的作用域鏈中會填入一個全局對象，該全局對象包含了所有全局變數，如下圖所示（註意：圖片只例舉了全部變數中的一部分）：

函數add的作用域將會在執行時用到。例如執行如下代碼：

var total = add(5,10);

執行此函數時會創建一個稱為“運行期上下文(execution context)”的內部對象，運行期上下文定義了函數執行時的環境。每個運行期上下文都有自己的作用域鏈，用於標識符解析，當運行期上下文被創建時，而它的作用域鏈初始化為當前運行函數的[[Scope]]所包含的對象。

這些值按照它們出現在函數中的順序被覆制到運行期上下文的作用域鏈中。它們共同組成了一個新的對象，叫“活動對象(activation object)”，該對象包含了函數的所有局部變數、命名參數、參數集合以及this，然後此對象會被推入作用域鏈的前端，當運行期上下文被銷毀，活動對象也隨之銷毀。新的作用域鏈如下圖所示：

在函數執行過程中，沒遇到一個變數，都會經歷一次標識符解析過程以決定從哪裡獲取和存儲數據。該過程從作用域鏈頭部，也就是從活動對象開始搜索，查找同名的標識符，如果找到了就使用這個標識符對應的變數，如果沒找到繼續搜索作用域鏈中的下一個對象，如果搜索完所有對象都未找到，則認為該標識符未定義。函數執行過程中，每個標識符都要經歷這樣的搜索過程。

從作用域鏈的結構可以看出，在運行期上下文的作用域鏈中，標識符所在的位置越深，讀寫速度就會越慢。如上圖所示，因為全局變數總是存在於運行期上下文作用域鏈的最末端，因此在標識符解析的時候，查找全局變數是最慢的。所以，在編寫代碼的時候應儘量少使用全局變數，儘可能使用局部變數。一個好的經驗法則是：如果一個跨作用域的對象被引用了一次以上，則先把它存儲到局部變數里再使用。例如下麵的代碼：

function changeColor(){
    document.getElementById("btnChange").onclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

這個函數引用了兩次全局變數document，查找該變數必須遍歷整個作用域鏈，直到最後在全局對象中才能找到。這段代碼可以重寫如下：

function changeColor(){
    var doc=document;
    doc.getElementById("btnChange").onclick=function(){
        doc.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

這段代碼比較簡單，重寫後不會顯示出巨大的性能提升，但是如果程式中有大量的全局變數被從反覆訪問，那麼重寫後的代碼性能會有顯著改善。

以上函數的作用域鏈盜版夢想天空的博客，原地址為http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html