深入淺出理解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ì)象也就保存了而沒有被回收,因此局部變量也就被保存了。
最簡(jiǎn)單的閉包:
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)文章
JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法
這篇文章主要介紹了JS上傳圖片前實(shí)現(xiàn)圖片預(yù)覽效果的方法,涉及javascript操作圖片的技巧,需要的朋友可以參考下2015-03-03使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應(yīng)用示例解析
這篇文章主要介紹了使用JavaScript和MQTT開發(fā)物聯(lián)網(wǎng)應(yīng)用示例解析,文章通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08JS+CSS 制作的超級(jí)簡(jiǎn)單的下拉菜單附圖
下拉菜單想必大家都有見到過吧,在本文將為大家介紹個(gè)不錯(cuò)的示例,超簡(jiǎn)單的,大家可以參考下哦2013-11-11javascript權(quán)威指南 學(xué)習(xí)筆記之變量作用域分享
最近一直在看《javascript權(quán)威指南 第五版》,變量作用域這一章,看得真的有點(diǎn)累。不過,收獲還是多多。2011-09-09JS焦點(diǎn)圖,JS 多個(gè)頁面放多個(gè)焦點(diǎn)圖的實(shí)例
下面小編就為大家?guī)硪黄狫S焦點(diǎn)圖,JS 多個(gè)頁面放多個(gè)焦點(diǎn)圖的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-12-12webpack3里使用uglifyjs壓縮js時(shí)打包報(bào)錯(cuò)的解決
這篇文章主要介紹了webpack3里使用uglifyjs壓縮js時(shí)打包報(bào)錯(cuò)的解決,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12JCrop+ajaxUpload 圖像切割上傳的實(shí)例代碼
這篇文章主要介紹了JCrop+ajaxUpload 圖像切割上傳的實(shí)例代碼的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07