聊一聊JavaScript範圍和範圍鏈，聊javascript範圍

聊一聊JavaScript範圍和範圍鏈，聊javascript範圍

每種程式設計語言，其變數都有一定的有效範圍，超過這個範圍之後，變數就失效了，這就是變數的範圍。從數學的角度來看，就是自變數的域。

範圍是變數的可存取範圍，即範圍控制著變數與函數的可見度和生命週期。在 JavaScript 中, 對象和函數同樣也是變數，變數在聲明他們的函數體以及這個函數體嵌套的任意函數體內部都是有定義的。

一、靜態範圍和動態範圍

靜態範圍

是指聲明的範圍是根據程式本文在編譯時間就確定的，也稱為詞法範圍。大多數現代程式設計語言都是採用靜態範圍規則，JavaScript就是採用的這種範圍。
採用靜態範圍的語言中，基本都是最內嵌套範圍規則：由一個聲明引進的標識符在這個聲明所在的範圍裡可見，而且在其內部嵌套的每個範圍裡也可見，除非它被嵌套於內部的對同名標識符的另一個聲明所掩蓋。
為了找到某個給定的標識符所引用的對象，應該在當前最內層範圍裡尋找。如果找到了一個聲明，也就可以找到該標識符所引用的對象。否則我們就到直接的外層範圍裡去尋找，並繼續向外順序地檢查外層範圍，直到到達程式的最外嵌套層次，也就是全域對象聲明所在的範圍。如果在所有層次上都沒有找到有關聲明，那麼這個程式就有錯誤。如下：

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

首先函數從chb()搜尋有沒有name的定義，然後繼續一層一層的向上搜尋，最後在cha()中搜到了name的定義，如果沒有搜到，則會報錯。

2、動態範圍

動態範圍的語言中，程式中某個變數所引用的對象是在程式運行時刻根據程式的控制流程資訊來確定的。

二、JavaScript的範圍

JavaScript中有兩種範圍，分別為全域範圍和局部範圍。

1、全域範圍（Global Scope）

在代碼中任何位置都是有定義的。即使在html 頁面中嵌套的一段js代碼中定義了一個全域變數，在引用的js檔案中仍能訪問到該變數。這就很有可能會造成全域變數的汙染。

以下三種情況的變數都會被視為全域變數
（1）最外層的函數和最外層的變數擁有全域範圍
（2）未經定義而直接賦值的變數自動被聲明為擁有全域範圍
（3）所有window對象的屬性擁有全域範圍

2、局部範圍（Local Scope）

局部範圍一般只能在固定的程式碼片段中才能訪問，如函數內部的變數（函數範圍）

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);

結果為：
xuxiaoping
xiao
xu//內層函數可以訪問外層函數的變數
undenfined  //在函數外部無法訪問函數的內部變數
xiao

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

3、函數範圍

塊級範圍：任何一對花括弧中的語句集都屬於一個塊，在這之中定義的所有變數在代碼塊外都是不可見的。大多數類C語言都是有塊級範圍的。
然而JavaScript的有個重要的特點就是沒有塊級範圍。

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

輸出結果為：

10
 hello

可見，在for語句外（也可以是if，while），塊中定義的變數i仍然是可以訪問的。也就是說，JavaScript並不支援塊級範圍，它只支援函數範圍，而且在一個函數中的任何位置定義的變數在該函數中的任何地方都是可見的。作為一個一開始編程就學習學習C和java的人來說，這個有點難以適應。據我測試PHP也是這樣的。

當然可以利用JavaScript的閉包的特性，類比個塊級範圍

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

結果為：i undefined

這樣就隔離了變數的定義。在js中，為了防止命名衝突，應該盡量避免使用全域變數和全域函數，因此這種閉包的用的特別的多。

4、JavaScript 變數生命週期

JavaScript 變數生命週期在它聲明時初始化。
局部變數在函數執行完畢後銷毀。
全域變數在頁面關閉後銷毀。

三、JavaScript的範圍鏈

一看是鏈，大概就可以跟資料結構中的鏈表相結合起來

在JavaScript中，函數也是對象，實際上，JavaScript裡一切都是對象。函數對象和其它對象一樣，擁有可以通過代碼訪問的屬性和一系列僅供JavaScript引擎訪問的內部屬性。其中一個內部屬性是[[Scope]]，由ECMA-262標準第三版定義，該內部屬性包含了函數被建立的範圍中對象的集合，這個集合被稱為函數的範圍鏈，它決定了哪些資料能被函數訪問。

　　當一個函數建立後，它的範圍鏈會被建立此函數的範圍中可訪問的資料對象填充。例如定義下面這樣一個函數：

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

在函數add建立時，它的範圍鏈中會填入一個全域對象，該全域對象包含了所有全域變數，如所示（注意：圖片只例舉了全部變數中的一部分）：

函數add的範圍將會在執行時用到。例如執行如下代碼：

var total = add(5,10);

　　執行此函數時會建立一個稱為“運行期上下文(execution context)”的內部對象，運行期上下文定義了函數執行時的環境。每個運行期上下文都有自己的範圍鏈，用於標識符解析，當運行期上下文被建立時，而它的範圍鏈初始化為當前運行函數的[[Scope]]所包含的對象。

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

　　

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

四、範圍鏈和代碼最佳化

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

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

這個函數引用了兩次全域變數document，尋找該變數必須遍曆整個範圍鏈，直到最後在全域對象中才能找到。這段代碼可以重寫如下：

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

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

五、with改變範圍鏈

數每次執行時對應的運行期上下文都是獨一無二的，所以多次調用同一個函數就會導致建立多個運行期上下文，當函數執行完畢，執行內容會被銷毀。每一個運行期上下文都和一個範圍鏈關聯。一般情況下，在運行期上下文啟動並執行過程中，其範圍鏈只會被 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(){ doSomething(); }; }}

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

　　當代碼運行到with語句時，運行期內容相關的範圍鏈臨時被改變了。一個新的可變對象被建立，它包含了參數指定的對象的所有屬性。這個對象將被推入範圍鏈的頭部，這意味著函數的所有局部變數現在處於第二個範圍鏈對象中，因此訪問代價更高了。如所示： 　　

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

總結

1、變數的範圍就是變數在哪些範圍有效。
2、變數的範圍鏈就是被建立的範圍中對象的集合。

以上就是本文的全部內容，希望對大家學習javascript程式設計有所協助。