深入淺出理解JavaScript閉包的功能與用法
本文實(shí)例講述了JavaScript閉包的功能與用法。分享給大家供大家參考，具體如下：
理解閉包關(guān)鍵是理解JS的對(duì)象的本質(zhì)以及垃圾收集機(jī)制。函數(shù)也是對(duì)象，也有屬性，通常執(zhí)行一個(gè)函數(shù)時(shí)，局部變量在函數(shù)執(zhí)行完后，內(nèi)存會(huì)被回收，這是JS的垃圾收集機(jī)制決定的，如果想保存局部變量所占用的內(nèi)存，就必須把保存在另一個(gè)不被回收的變量中，通常是全局變量。函數(shù)在創(chuàng)建時(shí)，內(nèi)部屬性[[Scope]]保存了作用域鏈，作用域鏈中包含外部函數(shù)以及全局對(duì)象的變量，被稱為變量對(duì)象。所以把內(nèi)部函數(shù)返回時(shí)，由于把函數(shù)保存了，所以內(nèi)部屬性[[Scope]]所保存的變量對(duì)象也就保存了而沒有被回收，因此局部變量也就被保存了。
最簡單的閉包：
function f1() {
var i = 0;
return function () {
var j = 0;
i++;
console.log(i,j);
};
}
var fn = f1();
fn();//1 0
fn();//2 0
還有諸如給元素添加事件，事件函數(shù)保存著外部函數(shù)的變量，通過這個(gè)特性可以讓按鈕顯示被點(diǎn)擊次數(shù)。
當(dāng)然可以創(chuàng)建多層閉包，最內(nèi)部函數(shù)保存所有外部函數(shù)以及全局對(duì)象的變量，但并不是任何地方都用閉包，因?yàn)槠涫冀K都帶有[[Scope]]屬性，所有比較占內(nèi)存，所以在需要的時(shí)候才用。
閉包在模塊化編程，為函數(shù)或?qū)ο髣?chuàng)建私有變量的時(shí)候非常有用，可以避免全局污染以及變量命名沖突的問題。
值得注意的是因?yàn)?/strong>[[Scope]]與函數(shù)有關(guān)，如上述例子，在兩次執(zhí)行f1函數(shù)把返回的函數(shù)保存在不同的變量中，其外部函數(shù)的變量是互不影響的。如：
function f1() {
var i = 0;
return function () {
var j = 0;
i++;
console.log(i,j);
};
}
var fn = f1();
fn();//1 0
fn();//2 0
var fn1 = f1();
fn1();//1 0
fn(); //3 0
fn1();//2 0
感興趣的朋友可以使用在線HTML/CSS/JavaScript前端代碼調(diào)試運(yùn)行工具：http://tools.jb51.net/code/WebCodeRun測(cè)試一下上述代碼的運(yùn)行效果，以加深對(duì)javascript閉包的認(rèn)識(shí)。
更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《javascript面向?qū)ο笕腴T教程》、《JavaScript常用函數(shù)技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。
相關(guān)文章
BootStrap下拉框在firefox瀏覽器界面不友好的解決方案
BootStrap下拉框在firefox瀏覽器界面很不友好，在firefix瀏覽器打開鏈接就會(huì)發(fā)現(xiàn)里面有個(gè)小容器，怎么處理呢，下面看下小編給大家分享的有關(guān)這個(gè)問題的處理方案2016-08-08
一般情況下我們?cè)贔LASH幻燈片字符串中有連接符時(shí)點(diǎn)擊鏈接就會(huì)不正常，造成鏈接中的參數(shù)丟失，那么就需要用encodeURIComponent來對(duì)鏈接地址進(jìn)行編碼2012-03-03
下面小編就為大家分享一篇JS原型繼承四步曲及原型繼承圖一覽，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2017-11-11
js點(diǎn)擊文本框彈出可選擇的checkbox復(fù)選框
這篇文章主要介紹了js點(diǎn)擊文本框彈出可選擇的checkbox復(fù)選框的相關(guān)資料,需要的朋友可以參考下2016-02-02
深入理解JavaScript系列（34）：設(shè)計(jì)模式之命令模式詳解
這篇文章主要介紹了深入理解JavaScript系列（34）：設(shè)計(jì)模式之命令模式詳解,命令模式(Command)的定義是：用于將一個(gè)請(qǐng)求封裝成一個(gè)對(duì)象,從而使你可用不同的請(qǐng)求對(duì)客戶進(jìn)行參數(shù)化,對(duì)請(qǐng)求排隊(duì)或者記錄請(qǐng)求日志,以及執(zhí)行可撤銷的操作,需要的朋友可以參考下2015-03-03
javascript特效實(shí)現(xiàn)——當(dāng)前時(shí)間和倒計(jì)時(shí)效果的簡單實(shí)例
下面小編就為大家?guī)硪黄猨avascript特效實(shí)現(xiàn)——當(dāng)前時(shí)間和倒計(jì)時(shí)效果的簡單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07
推薦4個(gè)原生javascript常用的函數(shù)
這篇文章主要介紹了推薦4個(gè)原生javascript常用的函數(shù),需要的朋友可以參考下2015-01-01
Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法
這篇文章主要介紹了Javascript動(dòng)態(tài)創(chuàng)建表格及刪除行列的方法,涉及javascript動(dòng)態(tài)操作表格的相關(guān)技巧,需要的朋友可以參考下2015-05-05
javascript實(shí)現(xiàn)簡單滾動(dòng)窗口
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)簡單滾動(dòng)窗口，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
js運(yùn)動(dòng)應(yīng)用實(shí)例解析
這篇文章主要針對(duì)js運(yùn)動(dòng)應(yīng)用進(jìn)行實(shí)例解析2015-12-12