快捷導(dǎo)航

JavaScript作用域鏈使用介紹

更新時間：2013年08月29日 12:29:05 作者：

作用域就是變量和函數(shù)的可訪問范圍，控制著變量和函數(shù)的可見性與生命周期，在JavaScript中變量的作用域有全局作用域和局部作用域

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

作用域

作用域就是變量和函數(shù)的可訪問范圍，控制著變量和函數(shù)的可見性與生命周期，在JavaScript中變量的作用域有全局作用域和局部作用域。

單純的JavaScript作用域還是很好理解的，在一些類C編程語言中花括號內(nèi)的每一段代碼都有各自的作用域，而且變量在聲明它們的代碼段外是不可見的，稱之為塊級的作用域，JavaScript容易讓初學(xué)者誤會的地方也在于此，JavaScript并沒有塊及的作用域，只有函數(shù)級作用域：變量在聲明它們的函數(shù)體及其子函數(shù)內(nèi)是可見的。

變量沒有在函數(shù)內(nèi)聲明或者聲明的時候沒有帶var就是全局變量，擁有全局作用域，window對象的所有屬性擁有全局作用域；在代碼任何地方都可以訪問，函數(shù)內(nèi)部聲明并且以var修飾的變量就是局部變量，只能在函數(shù)體內(nèi)使用，函數(shù)的參數(shù)雖然沒有使用var但仍然是局部變量。

復(fù)制代碼代碼如下:

var a=3; //全局變量
            function fn(b){ //局部變量
                c=2; //全局變量
                var d=5; //局部變量
                function subFn(){
                    var e=d; //父函數(shù)的局部變量對子函數(shù)可見
                    for(var i=0;i<3;i++){
                        console.write(i);
                    }
                    alert(i);//3, 在for循環(huán)內(nèi)聲明，循環(huán)外function內(nèi)仍然可見，沒有塊作用域
                }
            }
            alert(c); //在function內(nèi)聲明但不帶var修飾，仍然是全局變量

只要是理解了JavaScript沒有塊作用域，簡單的JavaScript作用域很好理解，還有一點兒容易讓初學(xué)者迷惑的地方是JavaScript變量可函數(shù)的與解析或者聲明提前，好多種叫法但說的是一件事情，JavaScript雖然是解釋執(zhí)行，但也不是按部就班逐句解釋執(zhí)行的，在真正解釋執(zhí)行之前，JavaScript解釋器會預(yù)解析代碼，將變量、函數(shù)聲明部分提前解釋，這就意味著我們可以在function聲明語句之前調(diào)用function，這多數(shù)人習(xí)以為常，但是對于變量的與解析乍一看會很奇怪

復(fù)制代碼代碼如下:

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

上面代碼在執(zhí)行前var a=3; 的聲明部分就已經(jīng)得到預(yù)解析（但是不會執(zhí)行賦值語句），所以第一次的時候會是undefined而不會報錯，執(zhí)行過賦值語句后會得到3，上段代碼去掉最后一句和下面代碼是一樣的效果。

復(fù)制代碼代碼如下:

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

然而
如果只是這樣那么JavaScript作用域問題就很簡單了，然而由于函數(shù)子函數(shù)導(dǎo)致的問題使作用域不止這樣簡單。大人物登場——執(zhí)行環(huán)境或者說運行期上下文（好土鱉）：執(zhí)行環(huán)境（execution context）定義了變量或函數(shù)有權(quán)訪問的其它數(shù)據(jù)，決定了它們的各自行為。每個執(zhí)行環(huán)境都有一個與之關(guān)聯(lián)的變量對象（variable object, VO），執(zhí)行環(huán)境中定義的所有變量和函數(shù)都會保存在這個對象中，解析器在處理數(shù)據(jù)的時候就會訪問這個內(nèi)部對象。

全局執(zhí)行環(huán)境是最外層的一個執(zhí)行環(huán)境，在web瀏覽器中全局執(zhí)行環(huán)境是window對象，因此所有全局變量和函數(shù)都是作為window對象的屬性和放大創(chuàng)建的。每個函數(shù)都有自己的執(zhí)行環(huán)境，當執(zhí)行流進入一個函數(shù)的時候，函數(shù)的環(huán)境會被推入一個函數(shù)棧中，而在函數(shù)執(zhí)行完畢后執(zhí)行環(huán)境出棧并被銷毀，保存在其中的所有變量和函數(shù)定義隨之銷毀，控制權(quán)返回到之前的執(zhí)行環(huán)境中，全局的執(zhí)行環(huán)境在應(yīng)用程序退出（瀏覽器關(guān)閉）才會被銷毀。

作用域鏈

當代碼在一個環(huán)境中執(zhí)行時，會創(chuàng)建變量對象的一個作用域鏈（scope chain,不簡稱sc）來保證對執(zhí)行環(huán)境有權(quán)訪問的變量和函數(shù)的有序訪問。作用域第一個對象始終是當前執(zhí)行代碼所在環(huán)境的變量對象（VO）

復(fù)制代碼代碼如下:

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

在函數(shù)a創(chuàng)建的時候它的作用域鏈填入全局對象,全局對象中有所有全局變量

如果執(zhí)行環(huán)境是函數(shù)，那么將其活動對象（activation object, AO）作為作用域鏈第一個對象，第二個對象是包含環(huán)境，下一個是包含環(huán)境的包含環(huán)境。。。。。

復(fù)制代碼代碼如下:

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

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

在函數(shù)運行過程中標識符的解析是沿著作用域鏈一級一級搜索的過程，從第一個對象開始，逐級向后回溯，直到找到同名標識符為止，找到后不再繼續(xù)遍歷，找不到就報錯。

再來看看閉包

之前博客曾經(jīng)總結(jié)道：只要存在調(diào)用內(nèi)部函數(shù)的可能，JavaScript就需要保留被引用的函數(shù)。而且JavaScript運行時需要跟蹤引用這個內(nèi)部函數(shù)的所有變量，直到最后一個變量廢棄，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間?；仡^再看看好理解了很多，父函數(shù)定義的變量在子函數(shù)的作用域鏈中，子函數(shù)沒有被銷毀，其作用域鏈中所有變量和函數(shù)就會被維護，不會被銷毀。

復(fù)制代碼代碼如下:

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

這是上篇博客提到過的經(jīng)典錯誤，每次element點擊alert都是length，這段代碼中為element綁定的click事件處理程序的作用域鏈是這樣的

由于內(nèi)部函數(shù)（click事件處理程序時刻有調(diào)用可能），所以其作用域鏈不能被銷毀（更別說本例中i在全局作用域中，只能頁面卸載是銷毀），i的值一直保持for循環(huán)執(zhí)行完后的length值，所以每次觸發(fā)onclick的時候才會alert length。

復(fù)制代碼代碼如下:

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

為什么這樣就行了呢，這時候onclick引用的變量變成了n，而由于立即執(zhí)行函數(shù)的原因，每個onclick函數(shù)在作用域鏈中分別保持著對應(yīng)的n（0~length-1），這時候就可以了。

最后

其實理解了執(zhí)行環(huán)境和作用域鏈后，閉包翻了變成顯而易見的東西，但是也不能濫用閉包，從上面例子可以看出，閉包會使子函數(shù)保持其作用域鏈的所有變量及函數(shù)與內(nèi)存中，內(nèi)存消耗很大，在使用的時候盡量銷毀父函數(shù)不再使用的變量。

您可能感興趣的文章: