JavaScript作用域和作用域鏈

時間：2024-07-21 13:05:38 JavaScript 我要投稿

相關推薦

JavaScript作用域和作用域鏈

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

　　JavaScript作用域

　　任何程序設計語言都有作用域的概念，簡單的說，作用域就是變量與函數(shù)的可訪問范圍，即作用域控制著變量與函數(shù)的可見性和生命周期。在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。

　　1. 全局作用域(Global Scope)

　　在代碼中任何地方都能訪問到的對象擁有全局作用域，一般來說一下幾種情形擁有全局作用域：

　　(1)最外層函數(shù)和在最外層函數(shù)外面定義的變量擁有全局作用域，例如：

　　復制代碼代碼如下:

　　var authorName="山邊小溪";

　　function doSomething(){

　　var blogName="夢想天空";

　　function innerSay(){

　　alert(blogName);

　　}

　　innerSay();

　　}

　　alert(authorName); //山邊小溪

　　alert(blogName); //腳本錯誤

　　doSomething(); //夢想天空

　　innerSay() //腳本錯誤

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

　　復制代碼代碼如下:

　　function doSomething(){

　　var authorName="山邊小溪";

　　blogName="夢想天空";

　　alert(authorName);

　　}

　　alert(blogName); //夢想天空

　　alert(authorName); //腳本錯誤

　　變量blogName擁有全局作用域，而authorName在函數(shù)外部無法訪問到。

　　(3)所有window對象的屬性擁有全局作用域

　　一般情況下，window對象的內置屬性都都擁有全局作用域，例如window.name、window.location、window.top等等。

　　1. 局部作用域(Local Scope)

　　和全局作用域相反，局部作用域一般只在固定的代碼片段內可訪問到，最常見的例如函數(shù)內部，所有在一些地方也會看到有人把這種作用域成為函數(shù)作用域，例如下列代碼中的blogName和函數(shù)innerSay都只擁有局部作用域。

　　復制代碼代碼如下:

　　function doSomething(){

　　var blogName="夢想天空";

　　function innerSay(){

　　alert(blogName);

　　}

　　innerSay();

　　}

　　alert(blogName); //腳本錯誤

　　innerSay(); //腳本錯誤

　　作用域鏈(Scope Chain)

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

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

　　復制代碼代碼如下:

　　function add(num1,num2) {

　　var sum = num1 + num2;

　　return sum;

　　}

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

　　函數(shù)add的作用域將會在執(zhí)行時用到。例如執(zhí)行如下代碼：

　　復制代碼代碼如下:

　　var total = add(5,10);

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

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

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

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

　　從作用域鏈的結構可以看出，在運行期上下文的作用域鏈中，標識符所在的位置越深，讀寫速度就會越慢。如上圖所示，因為全局變量總是存在于運行期上下文作用域鏈的最末端，因此在標識符解析的時候，查找全局變量是最慢的。所以，在編寫代碼的時候應盡量少使用全局變量，盡可能使用局部變量。一個好的經驗法則是：如果一個跨作用域的對象被引用了一次以上，則先把它存儲到局部變量里再使用。例如下面的代碼：

　　復制代碼代碼如下:

　　function changeColor(){

　　document.getElementById("btnChange").onclick=function(){

　　document.getElementById("targetCanvas").style.backgroundColor="red";

　　};

　　}

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

　　復制代碼代碼如下:

　　function changeColor(){

　　var doc=document;

　　doc.getElementById("btnChange").onclick=function(){

　　doc.getElementById("targetCanvas").style.backgroundColor="red";

　　};

　　}

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

　　改變作用域鏈

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

　　with語句是對象的快捷應用方式，用來避免書寫重復代碼。例如：

　　復制代碼代碼如下:

　　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(){