深入理解 JavaScript 作用域和作用域鏈

作用域是JavaScript最重要的概念之一，想要學好JavaScript就需要理解JavaScript作用域和作用域鏈的工作原理。今天這篇文章對JavaScript作用域和作用域鏈作簡單的介紹，希望能幫助大家更好的學習JavaScript。

JavaScript作用域

作用域就是變量與函數的可訪問範圍，即作用域控制着變量與函數的可見性和生命週期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。

1. 全局作用域（Global Scope）
   在代碼中任何地方都能訪問到的對象擁有全局作用域，一般來說以下幾種情形擁有全局作用域：
   1）一般都第一在 - 最外層函數和在最外層函數外面定義的變量擁有全局作用域，例如：

var name="龍門課棧";
function fn1(){
    var nameType="軟件開發";
    function fn2(){
        alert(nameType);
    }
    fn2();
}
alert(name);          //龍門課棧
alert(nameType);     //報錯
fn1();              //軟件開發
fn2()              //報錯

（2）所有末定義直接賦值的變量自動聲明爲擁有全局作用域，例如：

function fn1(){
    var name="龍門課棧";
    nameType="軟件開發";  //  爲全局變量
    alert(name);
}
fn1();               //龍門課棧
alert(nameType);     //軟件開發
alert(name);         //報錯

變量nameType擁有全局作用域，而name在函數外部無法訪問到 !

3）所有window對象的屬性擁有全局作用域
一般情況下，window對象的內置屬性都擁有全局作用域，例如window.name、window.location …… 。
1. 局部作用域（Local Scope）
和全局作用域相反，局部作用域一般只在固定的代碼片段內可訪問到，最常見的例如函數內部，所有在一些地方也會看到有人把這種作用域稱爲函數作用域，例如下列代碼中的name和函數fn1都只擁有局部作用域。

function fn1(){
    var nameType="軟件開發";
    function fn2(){
        alert(nameType);
    }
    fn2();
}
alert(blogName); //報錯
fn2();          //報錯

這裏的 blogName 變量 以及 fn2 ， 都是 方法 fn1 的局部變量 ,則外部訪問不到 ！

作用域鏈（Scope Chain）

　　在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").οnclick=function(){
        document.getElementById("targetCanvas").style.backgroundColor="red";
    };
}

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

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