javascript作用域鏈

謙行發表於2013-08-25
JavaScript

之前寫過一篇JavaScript 閉包究竟是什麼的文章理解閉包，覺得寫得很清晰，可以簡單理解閉包產生原因，但看評論都在說了解了作用域鏈和活動物件才能真正理解閉包，起初不以為然，後來在跟公司同事交流的時候發現作用域和執行環境確實很重要，又很基礎，對理解JavaScript閉包很有幫助，所以在寫一篇對作用域和執行環境的理解。

作用域

作用域就是變數和函式的可訪問範圍，控制著變數和函式的可見性與生命週期，在JavaScript中變數的作用域有全域性作用域和區域性作用域。

單純的JavaScript作用域還是很好理解的，在一些類C程式語言中花括號內的每一段程式碼都有各自的作用域，而且變數在宣告它們的程式碼段外是不可見的，稱之為塊級的作用域，JavaScript容易讓初學者誤會的地方也在於此，JavaScript並沒有塊及的作用域，只有函式級作用域：變數在宣告它們的函式體及其子函式內是可見的。

變數沒有在函式內宣告或者宣告的時候沒有帶var就是全域性變數，擁有全域性作用域，window物件的所有屬性擁有全域性作用域；在程式碼任何地方都可以訪問，函式內部宣告並且以var修飾的變數就是區域性變數，只能在函式體內使用，函式的引數雖然沒有使用var但仍然是區域性變數。

var a=3; //全域性變數
            function fn(b){ //區域性變數
                c=2; //全域性變數
                var d=5; //區域性變數
                function subFn(){
                    var e=d; //父函式的區域性變數對子函式可見
                    for(var i=0;i<3;i++){
                        console.write(i);
                    }
                    alert(i);//3, 在for迴圈內宣告，迴圈外function內仍然可見，沒有塊作用域
                }
            }
            alert(c); //在function內宣告但不帶var修飾，仍然是全域性變數

只要是理解了JavaScript沒有塊作用域，簡單的JavaScript作用域很好理解，還有一點兒容易讓初學者迷惑的地方是JavaScript變數可函式的與解析或者宣告提前，好多種叫法但說的是一件事情，JavaScript雖然是解釋執行，但也不是按部就班逐句解釋執行的，在真正解釋執行之前，JavaScript直譯器會預解析程式碼，將變數、函式宣告部分提前解釋，這就意味著我們可以在function宣告語句之前呼叫function，這多數人習以為常，但是對於變數的與解析乍一看會很奇怪

console.log(a); //undefined
            var a=3;
            console.log(a); //3
            console.log(b); //Uncaught ReferenceError: b is not defined

上面程式碼在執行前var a=3; 的宣告部分就已經得到預解析（但是不會執行賦值語句），所以第一次的時候會是undefined而不會報錯，執行過賦值語句後會得到3，上段程式碼去掉最後一句和下面程式碼是一樣的效果。

var a;
            console.log(a); //undefined
            a=3;
            console.log(a); //3

然而

如果只是這樣那麼JavaScript作用域問題就很簡單了，然而由於函式子函式導致的問題使作用域不止這樣簡單。大人物登場——執行環境或者說執行期上下文（好土鱉）：執行環境（execution context）定義了變數或函式有權訪問的其它資料，決定了它們的各自行為。每個執行環境都有一個與之關聯的變數物件（variable object, VO），執行環境中定義的所有變數和函式都會儲存在這個物件中，解析器在處理資料的時候就會訪問這個內部物件。

全域性執行環境是最外層的一個執行環境，在web瀏覽器中全域性執行環境是window物件，因此所有全域性變數和函式都是作為window物件的屬性和放大建立的。每個函式都有自己的執行環境，當執行流進入一個函式的時候，函式的環境會被推入一個函式棧中，而在函式執行完畢後執行環境出棧並被銷燬，儲存在其中的所有變數和函式定義隨之銷燬，控制權返回到之前的執行環境中，全域性的執行環境在應用程式退出（瀏覽器關閉）才會被銷燬。

作用域鏈

當程式碼在一個環境中執行時，會建立變數物件的一個作用域鏈（scope chain,不簡稱sc）來保證對執行環境有權訪問的變數和函式的有序訪問。作用域第一個物件始終是當前執行程式碼所在環境的變數物件（VO）

function a(x,y){
            var b=x+y;
            return b;
        }

在函式a建立的時候它的作用域鏈填入全域性物件,全域性物件中有所有全域性變數

image

如果執行環境是函式，那麼將其活動物件（activation object, AO）作為作用域鏈第一個物件，第二個物件是包含環境，下一個是包含環境的包含環境。。。。。

function a(x,y){
            var b=x+y;
            return b;
        }
        var tatal=a(5,10);

這時候 var total=a(5,10);語句的作用域鏈如下

image

在函式執行過程中識別符號的解析是沿著作用域鏈一級一級搜尋的過程，從第一個物件開始，逐級向後回溯，直到找到同名識別符號為止，找到後不再繼續遍歷，找不到就報錯。

再來看看閉包

之前部落格曾經總結道：只要存在呼叫內部函式的可能，JavaScript就需要保留被引用的函式。而且JavaScript執行時需要跟蹤引用這個內部函式的所有變數，直到最後一個變數廢棄，JavaScript的垃圾收集器才能釋放相應的記憶體空間。回頭再看看好理解了很多，父函式定義的變數在子函式的作用域鏈中，子函式沒有被銷燬，其作用域鏈中所有變數和函式就會被維護，不會被銷燬。

for(var i=0;i<elements.length;i++){
                elements[i].onclick=function(){
                    alert(i);
                }
            }

這是上篇部落格提到過的經典錯誤，每次element點選alert都是length，這段程式碼中為element繫結的click事件處理程式的作用域鏈是這樣的

image

由於內部函式（click事件處理程式時刻有呼叫可能），所以其作用域鏈不能被銷燬（更別說本例中i在全域性作用域中，只能頁面解除安裝是銷燬），i的值一直保持for迴圈執行完後的length值，所以每次觸發onclick的時候才會alert length。

for(var i=0;i<elements.length;i++){
                (function(n){
                    elements[n].onclick=function(){
                        alert(n);
                    }
                })(i);
            }

為什麼這樣就行了呢，這時候onclick引用的變數變成了n，而由於立即執行函式的原因，每個onclick函式在作用域鏈中分別保持著對應的n（0~length-1），這時候就可以了。

最後

其實理解了執行環境和作用域鏈後，閉包翻了變成顯而易見的東西，但是也不能濫用閉包，從上面例子可以看出，閉包會使子函式保持其作用域鏈的所有變數及函式與記憶體中，記憶體消耗很大，在使用的時候儘量銷燬父函式不再使用的變數。

相關文章