理解Javascript_15_作用域分配與變量訪問規(guī)則,再送個閉包
更新時間：2010年10月20日 11:24:53 作者：
在閱讀本博文之前，請先閱讀《理解Javascript_13_執(zhí)行模型詳解》
在'執(zhí)行模型詳解'中講到了關于作用域分配的問題，這一篇博文將詳細的說明函數(shù)對象、作用域鏈與執(zhí)行上下文的關系。
作用域分配與變量訪問規(guī)則
在 ECMAScript 中，函數(shù)也是對象。函數(shù)對象在變量實例化過程中會根據函數(shù)聲明來創(chuàng)建，或者是在計算函數(shù)表達式或調用 Function 構造函數(shù)時創(chuàng)建。(關于'函數(shù)對象'請見《理解Javascript_08_函數(shù)對象》)。每個函數(shù)對象都有一個內部的 [[scope]] 屬性，這個屬性也由對象列表（鏈）組成。這個內部的[[scope]] 屬性引用的就是創(chuàng)建它們的執(zhí)行環(huán)境的作用域鏈，同時，當前執(zhí)行環(huán)境的活動對象被添加到該對象列表的頂部。當我們在函數(shù)內部訪問變量時，其實就是在作用域鏈上尋找變量的過程。
理論性太強了(總結死我了！)，還是讓我們來看一段代碼吧：
<script type="text/javascript">
function outer(){
var i = 10;
function inner(){
var j = 100;
alert(j);//100
alert(i);//10
alert(adf);
}
inner();
}
outer();
</script>
下圖清晰的展現(xiàn)了上述代碼的內存分配與作用域分配情況:
下面來解釋一下：
1.載入代碼，創(chuàng)建全局執(zhí)行環(huán)境，此時會在可變對象(window)中添加outer變量，其指向于函數(shù)對象outer,此時作用域鏈中只有window對象.
2.執(zhí)行代碼，當程序執(zhí)行到outer()時，會在全局對象中尋找outer變量，成功調用。
3.創(chuàng)建outer的執(zhí)行環(huán)境，此時會新創(chuàng)建一個活動對象，添加變量i，設置值為10,添加變量inner，指向于函數(shù)對象inner.并將活動對象壓入作用域鏈中.并將函數(shù)對象outer的[[scope]]屬性指向活動對象outer。此時作用域鏈為outer的活動對象+window.
4.執(zhí)行代碼，為 i 成功賦值。當程序執(zhí)行到inner()時，會在函數(shù)對象outer的[[scope]]中尋找inner變量。找到后成功調用。
5.創(chuàng)建inner的執(zhí)行環(huán)境，新建一個活動對象，添加變量j，賦值為100,并將該活動對象壓入作用域鏈中，并函數(shù)對象inner的[[scope]]屬性指向活動對象inner.此時作用域鏈為:inner的活動對象+outer的活動對象+全局對象.
6.執(zhí)行代碼為j賦值，當訪問i、j時成功在作用域中找到對應的值并輸出，而當訪問變量adf時，沒有在作用域中尋找到，訪問出錯。
注：通過內存圖，我們會發(fā)現(xiàn)作用域鏈與prototype鏈是如此的相象。這說明了很多問題...(仁者見仁智者見智,自己探尋答案吧！)
閉包原理
在我們了解了作用域的問題之后，對于閉包這個問題已經很簡單了。什么是閉包？閉包就是封閉了外部函數(shù)作用域中變量的內部函數(shù)。
我們來看一個典型的閉包運用：生成increment值
<script type="text/javascript">
var increment = (function(){
var id = 0;
return function(){
return ++id;
}
})()
alert(increment());//1
alert(increment());//2
</script>
外層匿名函數(shù)返回的是一個內嵌函數(shù)，內嵌函數(shù)使用了外層匿名函數(shù)的局部變量id。照理外層匿名函數(shù)的局部變量在返回時就超出了作用域因此increment()調用無法使用才對。這就是閉包Closure，即函數(shù)調用返回了一個內嵌函數(shù)，而內嵌函數(shù)引用了外部函數(shù)的局部變量、參數(shù)等這些應當被關閉(Close)了的資源。這是怎么一回事呢？讓我們來尋找答案：
根據Scope Chain的理解可以解釋，返回的內嵌函數(shù)已經持有了構造它時的Scope Chain，雖然outer返回導致這些對象超出了作用域、生存期范圍，但JavaScript使用自動垃圾回收來釋放對象內存: 按照規(guī)則定期檢查，對象沒有任何引用才被釋放。因此上面的代碼能夠正確運行。
參考：
http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html
http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html
在 ECMAScript 中，函數(shù)也是對象。函數(shù)對象在變量實例化過程中會根據函數(shù)聲明來創(chuàng)建，或者是在計算函數(shù)表達式或調用 Function 構造函數(shù)時創(chuàng)建。(關于'函數(shù)對象'請見《理解Javascript_08_函數(shù)對象》)。每個函數(shù)對象都有一個內部的 [[scope]] 屬性，這個屬性也由對象列表（鏈）組成。這個內部的[[scope]] 屬性引用的就是創(chuàng)建它們的執(zhí)行環(huán)境的作用域鏈，同時，當前執(zhí)行環(huán)境的活動對象被添加到該對象列表的頂部。當我們在函數(shù)內部訪問變量時，其實就是在作用域鏈上尋找變量的過程。
理論性太強了(總結死我了！)，還是讓我們來看一段代碼吧：
復制代碼 代碼如下:
<script type="text/javascript">
function outer(){
var i = 10;
function inner(){
var j = 100;
alert(j);//100
alert(i);//10
alert(adf);
}
inner();
}
outer();
</script>
下圖清晰的展現(xiàn)了上述代碼的內存分配與作用域分配情況:
下面來解釋一下：
1.載入代碼，創(chuàng)建全局執(zhí)行環(huán)境，此時會在可變對象(window)中添加outer變量，其指向于函數(shù)對象outer,此時作用域鏈中只有window對象.
2.執(zhí)行代碼，當程序執(zhí)行到outer()時，會在全局對象中尋找outer變量，成功調用。
3.創(chuàng)建outer的執(zhí)行環(huán)境，此時會新創(chuàng)建一個活動對象，添加變量i，設置值為10,添加變量inner，指向于函數(shù)對象inner.并將活動對象壓入作用域鏈中.并將函數(shù)對象outer的[[scope]]屬性指向活動對象outer。此時作用域鏈為outer的活動對象+window.
4.執(zhí)行代碼，為 i 成功賦值。當程序執(zhí)行到inner()時，會在函數(shù)對象outer的[[scope]]中尋找inner變量。找到后成功調用。
5.創(chuàng)建inner的執(zhí)行環(huán)境，新建一個活動對象，添加變量j，賦值為100,并將該活動對象壓入作用域鏈中，并函數(shù)對象inner的[[scope]]屬性指向活動對象inner.此時作用域鏈為:inner的活動對象+outer的活動對象+全局對象.
6.執(zhí)行代碼為j賦值，當訪問i、j時成功在作用域中找到對應的值并輸出，而當訪問變量adf時，沒有在作用域中尋找到，訪問出錯。
注：通過內存圖，我們會發(fā)現(xiàn)作用域鏈與prototype鏈是如此的相象。這說明了很多問題...(仁者見仁智者見智,自己探尋答案吧！)
閉包原理
在我們了解了作用域的問題之后，對于閉包這個問題已經很簡單了。什么是閉包？閉包就是封閉了外部函數(shù)作用域中變量的內部函數(shù)。
我們來看一個典型的閉包運用：生成increment值
復制代碼 代碼如下:
<script type="text/javascript">
var increment = (function(){
var id = 0;
return function(){
return ++id;
}
})()
alert(increment());//1
alert(increment());//2
</script>
外層匿名函數(shù)返回的是一個內嵌函數(shù)，內嵌函數(shù)使用了外層匿名函數(shù)的局部變量id。照理外層匿名函數(shù)的局部變量在返回時就超出了作用域因此increment()調用無法使用才對。這就是閉包Closure，即函數(shù)調用返回了一個內嵌函數(shù)，而內嵌函數(shù)引用了外部函數(shù)的局部變量、參數(shù)等這些應當被關閉(Close)了的資源。這是怎么一回事呢？讓我們來尋找答案：
根據Scope Chain的理解可以解釋，返回的內嵌函數(shù)已經持有了構造它時的Scope Chain，雖然outer返回導致這些對象超出了作用域、生存期范圍，但JavaScript使用自動垃圾回收來釋放對象內存: 按照規(guī)則定期檢查，對象沒有任何引用才被釋放。因此上面的代碼能夠正確運行。
參考：
http://www.cnblogs.com/RicCC/archive/2008/02/15/JavaScript-Object-Model-Execution-Model.html
http://www.cn-cuckoo.com/2007/08/01/understand-javascript-closures-72.html
相關文章
你必須知道的Javascript知識點之"單線程事件驅動"的使用
本篇文章小編為大家介紹，你必須知道的Javascript知識點之"單線程事件驅動"的使用。需要的朋友參考下2013-04-04
“增強js程序代碼的健壯性”之我見大量示例代碼...2007-05-05
js-cookie插件是一個JS操作cookie的插件，源文件只有3.34 KB，非常輕量級，js-cookie也支持npm和Bower安裝和管理，下面看看js-cookie的具體用法2018-03-03
[紅色]CSS+JS構建的圖片查看器...2006-07-07
JS實現(xiàn)websocket長輪詢實時消息提示的效果
這篇文章主要介紹了JS實現(xiàn)websocket長輪詢實時消息提示的效果的相關資料,需要的朋友可以參考下2017-10-10
javascript設計模式 – 適配器模式原理與應用實例分析
這篇文章主要介紹了javascript設計模式 – 適配器模式,結合實例形式分析了javascript適配器模式相關概念、原理、用法及操作注意事項,需要的朋友可以參考下2020-04-04
JSON是一種基于文本的數(shù)據交換方式，或者叫做數(shù)據描述格式，這篇文章主要介紹了JS跨域交互(jQuery+php)之jsonp使用心得的相關資料，非常不錯，具有參考借鑒價值，需要的朋友一起學習吧2016-07-07
這篇文章主要為大家詳細介紹了原生js實現(xiàn)表格翻頁和跳轉，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
這篇文章主要介紹了微信小程序頁面縮放式側滑效果的實現(xiàn)代碼，實現(xiàn)原理就是通過點擊按鈕，往需要動畫的div中添加或移除擁有動畫效果的class。具體實例代碼大家跟隨小編一起通過本文學習吧2018-11-11
文本框獲得焦點的時在文本框的下方顯示一個浮動層，點擊文本框隱藏浮動層，下面為大家介紹下鼠標點擊時文本框與隱藏層處理問題，感興趣的朋友可以參考下2013-08-08