JavaScript作用域與作用域鏈深入解析_javascript技巧

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

JavaScript作用域

任何程式設計語言都有作用域的概念，簡單的說，作用域就是變數與函數的可訪問範圍，即作用域控制變數與函數的可見性與生命週期。在JavaScript中，變數的作用域有全域作用域和局部作用域兩種。

1. 全域作用域(Global Scope)

在程式碼中任何地方都能存取的物件擁有全域作用域，一般來說一下幾種情形擁有全域作用域：

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

複製程式碼 代碼如下:

var authorName="山邊小溪";
function doSomething(){
var blogName="";
function innerSay(){
alert(blogName);
}
innerSay();
}
alert(authorName); //山邊小溪
alert(blogName); //腳本錯誤doSomething(); //
innerSay() //腳本錯誤 

(2)所有末定義直接賦值的變數自動宣告為擁有全域作用域，例如：

複製程式碼

複製程式碼

程式碼如下:


function doSomething(){
var horNames="var horNameSomething(){
var horNameA="var 溪";
blogName="";

alert(authorName);
} alert(blogName); //

alert(authorName); //腳本錯誤 

變數blogName擁有全域作用域，而authorName在函數外部無法存取。

(3)所有window物件的屬性擁有全域作用域

一般情況下，window物件內建的屬性都擁有全域作用域，例如window.name、window.location、window.top等等。

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

複製程式碼


程式碼如下:


function doSomething(>

function doSomething(){
var ";
function innerSay(){

alert(blogName);
} innerSay();

}

alert(blogName); //腳本錯誤

}
alert(blogName); //腳本錯誤

in ); //腳本錯誤 作用域鏈(Scope Chain) 在JavaScript中，函數也是對象，事實上，JavaScript裡一切都是對象。函數物件和其它物件一樣，擁有可以透過程式碼存取的屬性和一系列僅供JavaScript引擎存取的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被創建的作用域中物件的集合，這個集合被稱為函數的作用域鏈，它決定了哪些資料能被函數存取。

當一個函數建立後，它的作用域鏈會被建立此函數的作用域中可存取的資料物件填入。例如定義下面這樣一個函數：

複製程式碼

程式碼如下:

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

} 

在函數被建立時，它的作用域中會填入全域物件，此全域物件包含了所有全域變量，如下圖所示(注意：圖片只例舉了全部變數中的一部分)：

函數add的作用域將會在執行時用到。例如執行以下程式碼：

複製程式碼 程式碼如下:var total = 程式碼如下:var total = add(5,tal = add(5,tal = add(5,tal = add(5,tal = add(5,tal) 10);
執行此函數時會建立一個稱為「運行期間上下文(execution context)」的內部對象，運行期間上下文定義了函數執行時的環境。每個運行期上下文都有自己的作用域鏈，用於標識符解析，當運行期上下文被創建時，而它的作用域鏈初始化為當前運行函數的[[Scope]]所包含的對象。

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

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

作用域鍊與程式碼最佳化

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

複製程式碼 程式碼如下:

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

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

};

} 

這個函數引用了兩次全域變數document，找出該變數必須遍歷整個作用域鏈，直到最後在全域物件中才能找到。這段程式碼可以重寫如下：

複製程式碼 程式碼如下:

function changeoror {
var doc=document;

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

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

};

} 

這段程式碼比較簡單，重寫後不會顯示出巨大的效能提升，但是如果程式中有大量的全域變數被從反覆訪問，那麼重寫後的程式碼效能會有顯著改善。

改變作用域鏈

函數每次執行時對應的運行期上下文都是獨一無二的，所以多次呼叫同一個函數就會導致創建多個運行期上下文，當函數執行完畢，執行上下文會被銷毀。每一個運行期上下文都和一個作用域鏈關聯。一般情況下，在運行期間上下文運行的過程中，其作用域鏈只會被 with 語句和 catch 語句影響。

with語句是物件的快速應用方式，用來避免書寫重複程式碼。例如：

複製程式碼 程式碼如下:

function{
with(document){

var bd=body,

links=getElementsByTagName("a"),

i=0,

len=links.length;

while(i 

update(links[i ]);

}

getElementById("btnInit").onclick=function(){

doSomething();

};

}

} 

這裡使用width語句來避免多次書寫document，看起來更有效率，實際上產生了效能問題。

當程式碼運行到with語句時，運行期上下文的作用域鏈暫時被改變了。一個新的可變物件被創建，它包含了參數指定的物件的所有屬性。這個物件將被推入作用域鏈的頭部，這意味著函數的所有局部變數現在處於第二個作用域鏈物件中，因此存取代價更高了。如下圖：

因此在程式中應避免使用with語句，在這個例子中，只要簡單的把document儲存在一個局部變數中就可以提升效能。

另外一個會改變作用域鏈的是try-catch語句中的catch語句。當try程式碼區塊中發生錯誤時，執行程序會跳到catch語句，然後把異常物件推入一個可變物件並置於作用域的頭部。在catch程式碼區塊內部，函數的所有局部變數將會被放在第二個作用域鏈物件中。範例程式碼：

複製程式碼 程式碼如下:

try{

doSomething();

}catch(ex){

alert(ex.message); //作用域鏈在此改變

}

請注意，一旦catch語句執行完畢，作用域鏈路會回到之前的狀態。 try-catch語句在程式碼偵錯和異常處理中非常有用，因此不建議完全避免。你可以透過優化程式碼來減少catch語句對效能的影響。一個很好的模式是將錯誤委託給一個函數處理，例如：

複製程式碼 程式碼如下:

try{

doSomething();

}catch(ex){

handleError(ex); //委託給處理器方法

} 

最佳化後的程式碼，handleError方法是catch子句中唯一執行的程式碼。此函數接收異常物件作為參數，這樣你可以更靈活和統一的處理錯誤。由於只執行一條語句，且沒有局部變數的訪問，作用域鏈的臨時改變就不會影響程式碼效能了。