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

作用域

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

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

變量沒有在函數內聲明或者聲明的時候沒有帶var就是全局變量，擁有全局作用域，window對象的所有屬性擁有全局作用域；在代碼任何地方都可以訪問，函數內部聲明并且以var修飾的變量就是局部變量，只能在函數體內使用，函數的參數雖然沒有使用var但仍然是局部變量。

var a=3; //全局變量function fn(b){ //局部變量c=2; //全局變量var d=5; //局部變量function subFn(){var e=d; //父函數的局部變量對子函數可見for(var i=0;i<3;i++){console.write(i);}alert(i);//3, 在for循環內聲明，循環外function內仍然可見，沒有塊作用域 }}alert(c); //在function內聲明但不帶var修飾，仍然是全局變量

只要是理解了JavaScript沒有塊作用域，簡單的JavaScript作用域很好理解，還有一點兒容易讓初學者迷惑的地方是JavaScript變量可函數的與解析或者聲明提前，好多種叫法但說的是一件事情，JavaScript雖然是解釋執行，但也不是按部就班逐句解釋執行的，在真正解釋執行之前，JavaScript解釋器會預解析代碼，將變量、函數聲明部分提前解釋，這就意味著我們可以在function聲明語句之前調用function，這多數人習以為常，但是對于變量的與解析乍一看會很奇怪

console.log(a); //undefinedvar a=3;console.log(a); //3console.log(b); //Uncaught ReferenceError: b is not defined

上面代碼在執行前var a=3; 的聲明部分就已經得到預解析（但是不會執行賦值語句），所以第一次的時候會是undefined而不會報錯，執行過賦值語句后會得到3，上段代碼去掉最后一句和下面代碼是一樣的效果。

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

然而

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

全局執行環境是最外層的一個執行環境，在web瀏覽器中全局執行環境是window對象，因此所有全局變量和函數都是作為window對象的屬性和放大創建的。每個函數都有自己的執行環境，當執行流進入一個函數的時候，函數的環境會被推入一個函數棧中，而在函數執行完畢后執行環境出棧并被銷毀，保存在其中的所有變量和函數定義隨之銷毀，控制權返回到之前的執行環境中，全局的執行環境在應用程序退出（瀏覽器關閉）才會被銷毀。

作用域鏈

當代碼在一個環境中執行時，會創建變量對象的一個作用域鏈（scope chain,不簡稱sc）來保證對執行環境有權訪問的變量和函數的有序訪問。作用域第一個對象始終是當前執行代碼所在環境的變量對象（VO）

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

在函數a創建的時候它的作用域鏈填入全局對象,全局對象中有所有全局變量

如果執行環境是函數，那么將其活動對象（activation object, AO）作為作用域鏈第一個對象，第二個對象是包含環境，下一個是包含環境的包含環境。。。。。

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

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

在函數運行過程中標識符的解析是沿著作用域鏈一級一級搜索的過程，從第一個對象開始，逐級向后回溯，直到找到同名標識符為止，找到后不再繼續遍歷，找不到就報錯。

再來看看閉包

之前博客曾經總結道：只要存在調用內部函數的可能，JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內部函數的所有變量，直到最后一個變量廢棄，JavaScript的垃圾收集器才能釋放相應的內存空間。回頭再看看好理解了很多，父函數定義的變量在子函數的作用域鏈中，子函數沒有被銷毀，其作用域鏈中所有變量和函數就會被維護，不會被銷毀。

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

這是上篇博客提到過的經典錯誤，每次element點擊alert都是length，這段代碼中為element綁定的click事件處理程序的作用域鏈是這樣的

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

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

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

最后

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

（1）作用域

一個變量的作用域（scope）是程序源代碼中定義的這個變量的區域。

1. 在JS中使用的是詞法作用域（lexical scope)

不在任何函數內聲明的變量（函數內省略var的也算全局）稱作全局變量（global scope）
在函數內聲明的變量具有函數作用域（function scope），屬于局部變量

局部變量優先級高于全局變量

?

1 2 3 4 5 6

var name="one"; function test(){ ?var name="two"; ?console.log(name); //two } test();

函數內省略var的，會影響全局變量，因為它實際上已經被重寫成了全局變量

?

1 2 3 4 5 6 7

var name="one"; function test(){ ?name="two"; ?? } test(); console.log(name); //two

函數作用域，就是說函數是一個作用域的基本單位，js不像c/c++那樣具有塊級作用域 比如 if for 等

?

1 2 3 4 5 6 7 8 9 10

function test(){ ?for(var i=0;i<10;i++){ ??if(i==5){ ???var name = "one"; ??} ?} ?console.log(name); //one } test(); //因為是函數級作用域，所以可以訪問到name="one"

當然了，js里邊還使用到了高階函數，其實可以理解成嵌套函數

?

1 2 3 4 5 6 7

function test1(){ ?var name = "one"; ?return function (){ ??console.log(name); ?} } test1()();

test1()之后將調用外層函數，返回了一個內層函數，再繼續()，就相應調用執行了內層函數，所以就輸出 ”one"
嵌套函數涉及到了閉包，后面再談..這里內層函數可以訪問到外層函數中聲明的變量name，這就涉及到了作用域鏈機制

2. JS中的聲明提前

js中的函數作用域是指在函數內聲明的所有變量在函數體內始終是可見的。并且，變量在聲明之前就可以使用了，這種情況就叫做聲明提前（hoisting)
tip:聲明提前是在js引擎預編譯時就進行了，在代碼被執行之前已經有聲明提前的現象產生了

比如

?

1 2 3 4 5 6 7 8

var name="one"; function test(){ ?console.log(name); //undefined ?var name="two"; ?console.log(name); //two } test();

上邊就達到了下面的效果

?

1 2 3 4 5 6 7 8 9

var name="one"; function test(){ ?var name; ?console.log(name); //undefined ?name="two"; ?console.log(name); //two } test();

再試試把var去掉？這是函數內的name已經變成了全局變量，所以不再是undefined

?

1 2 3 4 5 6 7 8

var name="one"; function test(){ ?console.log(name); //one ?name="two"; ?console.log(name); //two } test();

3. 值得注意的是，上面提到的都沒有傳參數，如果test有參數，又如何呢？

?

1 2 3 4 5 6 7 8 9

function test(name){ ?console.log(name); //one ?name="two"; ?console.log(name); //two } var name = "one"; test(name); console.log(name); // one

之前說過，基本類型是按值傳遞的，所以傳進test里面的name實際上只是一個副本，函數返回之后這個副本就被清除了。
千萬不要以為函數里邊的name="two"把全局name修改了，因為它們是兩個獨立的name

（2）作用域鏈

上面提到的高級函數就涉及到了作用域鏈

?

1 2 3 4 5 6 7

function test1(){ ?var name = "one"; ?return function (){ ??console.log(name); ?} } test1()();

1. 引入一大段話來解釋：
每一段js代碼（全局代碼或函數）都有一個與之關聯的作用域鏈（scope chain）。

這個作用域鏈是一個對象列表或者鏈表，這組對象定義了這段代碼中“作用域中”的變量。

當js需要查找變量x的值的時候（這個過程稱為變量解析（variable resolution）），它會從鏈的第一個對象開始查找，如果這個對象有一個名為x的屬性，則會直接使用這個屬性的值，如果第一個對象中沒有名為x的屬性，js會繼續查找鏈上的下一個對象。如果第二個對象依然沒有名為x的屬性，則會繼續查找下一個，以此類推。如果作用域鏈上沒有任何一個對象含有屬性x，那么就認為這段代碼的作用域鏈上不存在x，并最終拋出一個引用錯誤（ReferenceError）異常。

2. 作用域鏈舉例：

在js最頂層代碼中（也就是不包括任何函數定義內的代碼），作用域鏈由一個全局對象組成。

在不包含嵌套的函數體內，作用域鏈上有兩個對象，第一個是定義函數參數和局部變量的對象，第二個是全局對象。

在一個嵌套的函數體內，作用域上至少有三個對象。

3. 作用域鏈創建規則：

當定義一個函數時（注意，是定義的時候就開始了），它實際上保存一個作用域鏈。

當調用這個函數時，它創建一個新的對象來儲存它的參數或局部變量，并將這個對象添加保存至那個作用域鏈上，同時創建一個新的更長的表示函數調用作用域的“鏈”。

對于嵌套函數來說，情況又有所變化：每次調用外部函數的時候，內部函數又會重新定義一遍。因為每次調用外部函數的時候，作用域鏈都是不同的。內部函數在每次定義的時候都要微妙的差別---在每次調用外部函數時，內部函數的代碼都是相同的，而且關聯這段代碼的作用域鏈也不相同。

（tip: 把上面三點理解好，記住了，最好還要能用自己的話說出來，不然就背下來，因為面試官就直接問你：請描述一下作用域鏈...)

舉個作用域鏈的實用例子：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var name="one"; function test(){ ?var name="two"; ?function test1(){ ??var name="three"; ??console.log(name); //three ?} ?function test2(){ ??console.log(name); // two ?} ?? ?test1(); ?test2(); } test();

上邊是個嵌套函數，相應的應該是作用域鏈上有三個對象
那么在調用的時候，需要查找name的值，就在作用域鏈上查找

當成功調用test1()的時候，順序為 test1()->test()->全局對象window 因為在test1()上就找到了name的值three，所以完成搜索返回
當成功調用test1()的時候，順序為 test2()->test()->全局對象window 因為在test2()上沒找到name的值，所以找test()中的，找到了name的值two,就完成搜索返回

還有一個例子有時候我們會犯錯的，面試的時候也經常被騙到。

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function buttonInit(){ ??for(var i=1;i<4;i++){ ????var b=document.getElementById("button"+i); ????b.addEventListener("click",function(){ ??????alert("Button"+i); //都是 Button4 ????},false); ??} } window.onload=buttonInit; </script> </head> <body> <button id="button1">Button1</button> <button id="button2">Button2</button> <button id="button3">Button3</button> </body> </html>

為什么？
根據作用域鏈中變量的尋找規則：

?

1 2 3

b.addEventListener("click",function(){ ??????alert("Button"+i); ????},false);

這里有一個函數，它是匿名函數，既然是函數，那就在作用域鏈上具有一個對象，這個函數里邊使用到了變量i，它自然會在作用域上尋找它。
查找順序是 這個匿名函數 -->外部的函數buttonInit() -->全局對象window

匿名函數中找不到i,自然跑到了buttonInit(), ok,在for中找到了，

這時注冊事件已經結束了，不要以為它會一個一個把i放下來，因為函數作用域之內的變量對作用域內是一直可見的，就是說會保持到最后的狀態

當匿名函數要使用i的時候，注冊事件完了，i已經變成了4，所以都是Button4

那怎么解決呢？

給它傳值進去吧，每次循環時，再使用一個匿名函數，把for里邊的i傳進去，匿名函數的規則如代碼

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function buttonInit(){ ??for(var i=1;i<4;i++){ ????(function(data_i){ ????var b=document.getElementById("button"+data_i); ????b.addEventListener("click",function(){ ??????alert("Button"+data_i); ????},false); ????})(i); ??} } window.onload=buttonInit; </script> </head> <body> <button id="button1">Button1</button> <button id="button2">Button2</button> <button id="button3">Button3</button> </body> </html>

這樣就可以 Button1..2..3了

4.上述就是作用域鏈的基本描述，另外，with語句可用于臨時拓展作用域鏈（不推薦使用with）

語法形如：

with(object)

statement

這個with語句，將object添加到作用域鏈的頭部，然后執行statement,最后把作用域鏈恢復到原始狀態

簡單用法：

比如給表單中各個項的值value賦值

一般可以我們直接這樣

?

1 2 3 4

var f = document.forms[0]; f.name.value = ""; f.age.value = ""; f.email.value = "";

引入with后(因為使用with會產生一系列問題，所以還是使用上面那張形式吧）

?

1 2 3 4 5

with(document.forms[0]){ f.name.value = ""; f.age.value = ""; f.email.value = ""; }

另外，假如 一個對象o具有x屬性，o.x = 1;
那么使用

?

1 2 3

with(o){ ?x = 2; }

就可以轉換成 o.x = 2;
假如o沒有定義屬性x，它的功能就只是相當于 x = 2; 一個全局變量罷了。

因為with提供了一種讀取o的屬性的快捷方式，但他并不能創建o本身沒有的屬性。

要理解變量的作用域范圍就得先理解作用域鏈
用var關鍵字聲明一個變量時，就是為該變量所在的對象添加了一個屬性。
作用域鏈：由于js的變量都是對象的屬性，而該對象可能又是其它對象的屬性，而所有的對象都是window對象的屬性，所以這些對象的關系可以看作是一條鏈
鏈頭就是變量所處的對象，鏈尾就是window對象

看下面的代碼：

復制代碼 代碼如下:
function t() {
var a;
function t2() {
var b;
}
}

js中函數也是對象，所以變量a所在的對象是t，t又在window對象中，所以a的作用域鏈如下
t--window
那么b所以在的對象即t2，t2又包含在t中，t又在window對象，所以b的作用域鏈如下
t2--t--window
明白了作用域鏈下面就開始變量的作用域分析了
1 javascript 沒有var的變量都為全局變量，且為window對象的屬性
復制代碼 代碼如下:
function test1() {
//執行這個句的時候它會找作用域對象，這個函數就是作用域鏈中的第一個對象，但這個對象中沒有相關的var語句
//于里就找作用域鏈的第二個對象，即全局對象，而全局對象中也沒有相關的var語句
//由于沒有相關的var語句，js隱式在函數地聲明了變量即var all;
all = 30;
alert(all);
}
test1();
alert(all);
alert(window.all);

2 函數內(函數內的函數除外)定義的變量在整個函數內部都有效
復制代碼 代碼如下:
function test2() {
var t = 0;
//在for的條件里定義變量，這個變更的作用域鏈對象是這個函數
//因此在整個的函數里它是有效的
for (var i = 0; i < 5; i++) {
t += i;
}
alert(i);
}
test2();

3 函數內部的變量取代全局同名變量
復制代碼 代碼如下:
var t = "bb";
function test() {
//執行t的時候，它會先找作用域鏈對象，由于它定義在函數內部，所以這個函數就是它的作用域鏈的第一個對象
//而在這個對象里又有t的定義，所以t就是局部變量了，它替換了全局變量t
//t只是此時有定義，但并沒有賦值，賦值在下一行，所以這里輸出了undefined
alert(t);
var t = "aa";
alert(t);
}
test();

4 沒塊的作用域
復制代碼 代碼如下:
if (true) {
//在塊中定義了一個變量，它的作用域鏈的第一個對象就是全局對象window
var tmp = 0;
}
//tmp的作用域鏈的第一個對象就是全局對象window，而上面又有全局對象中相關的var語句，因此輸出0
alert(tmp);


以下內容來自讀網上博客的總結，當筆記使用，只記重點，同時非常感謝樂于分享的博主們，是你們讓我站在了巨人的肩旁上！
1、
復制代碼 代碼如下:
var temp = (function(){
var name ="test";
return function(){
?alert(name);
}
})();

以上代碼片斷是我們jser經常見到的寫法，是傳說中的閉包。 眾所周知：調用 temp();會彈出 “ test”;該過程可以有以下三條理論作為依據來解釋：

1）js 作用域只和函數的界定符相關，函數與函數的嵌套形成了作用域鏈；
2）作用域鏈的創建規則是復制上一層環境的作用域鏈，并將指向本環境變量對象的指針放到鏈首；
3）在Javascript中，如果一個對象不再被引用，那么這個對象就會被GC回收。如果兩個對象互相引用，而不再被第3者所引用，那么這兩個互相引用的對象也會被回收。

如果看了以上3條還不明白，可看接下來結合理論對代碼的詳細解釋：
首先外層函數執行完，被銷毀；但是外層函數的作用域鏈被復制到內層函數的作用域鏈里，組成內層函數的作用域鏈的一部分，記住是復制，不是引用（依據第2條），所以內層函數仍然可以訪問到 name;由于 返回的內層函數被 temp 引用，所以當外層函數執行完被銷毀后，內層函數雖然作為外層函數的一部分，但是依然存在，正如第3條依據那樣，它被第三者引用了；傳說中的閉包也就是這個理

總結

以上是生活随笔為你收集整理的js作用域及作用域链概念理解及使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。