快捷導(dǎo)航

JavaScript作用域鏈?zhǔn)褂媒榻B

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

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

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

作用域

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

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

變量沒有在函數(shù)內(nèi)聲明或者聲明的時(shí)候沒有帶var就是全局變量，擁有全局作用域，window對(duì)象的所有屬性擁有全局作用域；在代碼任何地方都可以訪問，函數(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ù)的局部變量對(duì)子函數(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沒有塊作用域，簡(jiǎn)單的JavaScript作用域很好理解，還有一點(diǎn)兒容易讓初學(xué)者迷惑的地方是JavaScript變量可函數(shù)的與解析或者聲明提前，好多種叫法但說的是一件事情，JavaScript雖然是解釋執(zhí)行，但也不是按部就班逐句解釋執(zhí)行的，在真正解釋執(zhí)行之前，JavaScript解釋器會(huì)預(yù)解析代碼，將變量、函數(shù)聲明部分提前解釋，這就意味著我們可以在function聲明語句之前調(diào)用function，這多數(shù)人習(xí)以為常，但是對(duì)于變量的與解析乍一看會(huì)很奇怪

復(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ù)解析（但是不會(huì)執(zhí)行賦值語句），所以第一次的時(shí)候會(huì)是undefined而不會(huì)報(bào)錯(cuò)，執(zhí)行過賦值語句后會(huì)得到3，上段代碼去掉最后一句和下面代碼是一樣的效果。

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

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

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

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

作用域鏈

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

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

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

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

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

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

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

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

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

再來看看閉包

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

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

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

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

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

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

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

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

最后

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

您可能感興趣的文章: