每種編程語言，其變量都有一定的有效范圍，超過這個(gè)范圍之后，變量就失效了，這就是變量的作用域。從數(shù)學(xué)的角度來看，就是自變量的域。

作用域是變量的可訪問范圍，即作用域控制著變量與函數(shù)的可見性和生命周期。在 JavaScript 中, 對象和函數(shù)同樣也是變量，變量在聲明他們的函數(shù)體以及這個(gè)函數(shù)體嵌套的任意函數(shù)體內(nèi)部都是有定義的。

一、靜態(tài)作用域和動(dòng)態(tài)作用域

靜態(tài)作用域

是指聲明的作用域是根據(jù)程序正文在編譯時(shí)就確定的，也稱為詞法作用域。大多數(shù)現(xiàn)代程序設(shè)計(jì)語言都是采用靜態(tài)作用域規(guī)則，JavaScript就是采用的這種作用域。
采用靜態(tài)作用域的語言中，基本都是最內(nèi)嵌套作用域規(guī)則：由一個(gè)聲明引進(jìn)的標(biāo)識(shí)符在這個(gè)聲明所在的作用域里可見，而且在其內(nèi)部嵌套的每個(gè)作用域里也可見，除非它被嵌套于內(nèi)部的對同名標(biāo)識(shí)符的另一個(gè)聲明所掩蓋。
為了找到某個(gè)給定的標(biāo)識(shí)符所引用的對象，應(yīng)該在當(dāng)前最內(nèi)層作用域里查找。如果找到了一個(gè)聲明，也就可以找到該標(biāo)識(shí)符所引用的對象。否則我們就到直接的外層作用域里去查找，并繼續(xù)向外順序地檢查外層作用域，直到到達(dá)程序的最外嵌套層次，也就是全局對象聲明所在的作用域。如果在所有層次上都沒有找到有關(guān)聲明，那么這個(gè)程序就有錯(cuò)誤。如下：

function cha(){
 var name = "xiao;"
 function chb() {
 function chc() {
 console.log(name);
 }
 } 
}

首先函數(shù)從chb()搜索有沒有name的定義，然后繼續(xù)一層一層的向上搜索，最后在cha()中搜到了name的定義，如果沒有搜到，則會(huì)報(bào)錯(cuò)。

2、動(dòng)態(tài)作用域

動(dòng)態(tài)作用域的語言中，程序中某個(gè)變量所引用的對象是在程序運(yùn)行時(shí)刻根據(jù)程序的控制流信息來確定的。

二、JavaScript的作用域

JavaScript中有兩種作用域，分別為全局作用域和局部作用域。

1、全局作用域（Global Scope）

在代碼中任何位置都是有定義的。即使在html 頁面中嵌套的一段js代碼中定義了一個(gè)全局變量，在引用的js文件中仍能訪問到該變量。這就很有可能會(huì)造成全局變量的污染。

以下三種情況的變量都會(huì)被視為全局變量
（1）最外層的函數(shù)和最外層的變量擁有全局作用域
（2）未經(jīng)定義而直接賦值的變量自動(dòng)被聲明為擁有全局作用域
（3）所有window對象的屬性擁有全局作用域

2、局部作用域（Local Scope）

局部作用域一般只能在固定的代碼片段中才能訪問，如函數(shù)內(nèi)部的變量（函數(shù)作用域）

var name = "xuxiaoping";
function echoName() {
 var firstname = "xu";//局部作用域
 secondname = "xiao";//全局作用域
 function echoFirstName() {
 console.log(first name);//xu
 }
 console.log(secondname);
 return echoFirstName;
}
console.log(name);//全局作用域

var f = echoName();
f();
console.log(firstname);
console.log(secondname);

結(jié)果為：
xuxiaoping
xiao
xu//內(nèi)層函數(shù)可以訪問外層函數(shù)的變量
undenfined  //在函數(shù)外部無法訪問函數(shù)的內(nèi)部變量
xiao

JavaScript將全局變量附加到了window對象上，成為了window對象的屬性。

3、函數(shù)作用域

塊級作用域：任何一對花括號中的語句集都屬于一個(gè)塊，在這之中定義的所有變量在代碼塊外都是不可見的。大多數(shù)類C語言都是有塊級作用域的。
然而JavaScript的有個(gè)重要的特點(diǎn)就是沒有塊級作用域。

function echoi() {
 for(var i = 0;i<10;i++){
 ;//console.log(i);
 }
 if(true){
 var str = "hello";
 }
 console.log(i);
 console.log(str);
}
echoi();

輸出結(jié)果為：

10
 hello

可見，在for語句外（也可以是if，while），塊中定義的變量i仍然是可以訪問的。也就是說，JavaScript并不支持塊級作用域，它只支持函數(shù)作用域，而且在一個(gè)函數(shù)中的任何位置定義的變量在該函數(shù)中的任何地方都是可見的。作為一個(gè)一開始編程就學(xué)習(xí)學(xué)習(xí)C和java的人來說，這個(gè)有點(diǎn)難以適應(yīng)。據(jù)我測試PHP也是這樣的。

當(dāng)然可以利用JavaScript的閉包的特性，模擬個(gè)塊級作用域

function echoi() {
 (function() {
 for(var i = 0;i<10;i++){
 ;//console.log(i);
 }
 })();
 if(true){
 var str = "hello";
 }
 console.log(i);
 console.log(str);
}
echoi();

結(jié)果為：i undefined

這樣就隔離了變量的定義。在js中，為了防止命名沖突，應(yīng)該盡量避免使用全局變量和全局函數(shù)，因此這種閉包的用的特別的多。

4、JavaScript 變量生命周期

JavaScript 變量生命周期在它聲明時(shí)初始化。
局部變量在函數(shù)執(zhí)行完畢后銷毀。
全局變量在頁面關(guān)閉后銷毀。

三、JavaScript的作用域鏈

一看是鏈，大概就可以跟數(shù)據(jù)結(jié)構(gòu)中的鏈表相結(jié)合起來

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

　　當(dāng)一個(gè)函數(shù)創(chuàng)建后，它的作用域鏈會(huì)被創(chuàng)建此函數(shù)的作用域中可訪問的數(shù)據(jù)對象填充。例如定義下面這樣一個(gè)函數(shù)：

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

在函數(shù)add創(chuàng)建時(shí)，它的作用域鏈中會(huì)填入一個(gè)全局對象，該全局對象包含了所有全局變量，如下圖所示（注意：圖片只例舉了全部變量中的一部分）：

函數(shù)add的作用域?qū)?huì)在執(zhí)行時(shí)用到。例如執(zhí)行如下代碼：

var total = add(5,10);

　　執(zhí)行此函數(shù)時(shí)會(huì)創(chuàng)建一個(gè)稱為“運(yùn)行期上下文(execution context)”的內(nèi)部對象，運(yùn)行期上下文定義了函數(shù)執(zhí)行時(shí)的環(huán)境。每個(gè)運(yùn)行期上下文都有自己的作用域鏈，用于標(biāo)識(shí)符解析，當(dāng)運(yùn)行期上下文被創(chuàng)建時(shí)，而它的作用域鏈初始化為當(dāng)前運(yùn)行函數(shù)的[[Scope]]所包含的對象。

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

在函數(shù)執(zhí)行過程中，每遇到一個(gè)變量，都會(huì)經(jīng)歷一次標(biāo)識(shí)符解析過程以決定從哪里獲取和存儲(chǔ)數(shù)據(jù)。該過程從作用域鏈頭部，也就是從活動(dòng)對象開始搜索，查找同名的標(biāo)識(shí)符，如果找到了就使用這個(gè)標(biāo)識(shí)符對應(yīng)的變量，如果沒找到繼續(xù)搜索作用域鏈中的下一個(gè)對象，如果搜索完所有對象都未找到，則認(rèn)為該標(biāo)識(shí)符未定義。函數(shù)執(zhí)行過程中，每個(gè)標(biāo)識(shí)符都要經(jīng)歷這樣的搜索過程。

四、作用域鏈和代碼優(yōu)化

從作用域鏈的結(jié)構(gòu)可以看出，在運(yùn)行期上下文的作用域鏈中，標(biāo)識(shí)符所在的位置越深，讀寫速度就會(huì)越慢。如上圖所示，因?yàn)槿肿兞靠偸谴嬖谟谶\(yùn)行期上下文作用域鏈的最末端，因此在標(biāo)識(shí)符解析的時(shí)候，查找全局變量是最慢的。所以，在編寫代碼的時(shí)候應(yīng)盡量少使用全局變量，盡可能使用局部變量。一個(gè)好的經(jīng)驗(yàn)法則是：如果一個(gè)跨作用域的對象被引用了一次以上，則先把它存儲(chǔ)到局部變量里再使用。例如下面的代碼：

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

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

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

這段代碼比較簡單，重寫后不會(huì)顯示出巨大的性能提升，但是如果程序中有大量的全局變量被從反復(fù)訪問，那么重寫后的代碼性能會(huì)有顯著改善。

五、with改變作用域鏈

數(shù)每次執(zhí)行時(shí)對應(yīng)的運(yùn)行期上下文都是獨(dú)一無二的，所以多次調(diào)用同一個(gè)函數(shù)就會(huì)導(dǎo)致創(chuàng)建多個(gè)運(yùn)行期上下文，當(dāng)函數(shù)執(zhí)行完畢，執(zhí)行上下文會(huì)被銷毀。每一個(gè)運(yùn)行期上下文都和一個(gè)作用域鏈關(guān)聯(lián)。一般情況下，在運(yùn)行期上下文運(yùn)行的過程中，其作用域鏈只會(huì)被 with 語句和 catch 語句影響。

　　with語句是對象的快捷應(yīng)用方式，用來避免書寫重復(fù)代碼。例如： 　　

function initUI(){
 with(document){
 var bd=body,
 links=getElementsByTagName("a"),
 i=0,
 len=links.length;
 while(i < len){
 update(links[i++]);
 }
 getElementById("btnInit").onclick=function(){
 doSomething();
 };
 }
}

這里使用width語句來避免多次書寫document，看上去更高效，實(shí)際上產(chǎn)生了性能問題。

　　當(dāng)代碼運(yùn)行到with語句時(shí)，運(yùn)行期上下文的作用域鏈臨時(shí)被改變了。一個(gè)新的可變對象被創(chuàng)建，它包含了參數(shù)指定的對象的所有屬性。這個(gè)對象將被推入作用域鏈的頭部，這意味著函數(shù)的所有局部變量現(xiàn)在處于第二個(gè)作用域鏈對象中，因此訪問代價(jià)更高了。如下圖所示： 　　

因此在程序中應(yīng)避免使用with語句，在這個(gè)例子中，只要簡單的把document存儲(chǔ)在一個(gè)局部變量中就可以提升性能。

總結(jié)

1、變量的作用域就是變量在哪些范圍有效。
2、變量的作用域鏈就是被創(chuàng)建的作用域中對象的集合。

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

最新評論