在JS的世界中,閉包一直是一個(gè)神奇的存在十籍,它無處不在蛆封,卻又很難感知;對(duì)于很多JS程序員來說勾栗,也許寫了多年的程序之后也并不清楚閉包為何物惨篱,但是這也并不妨礙他們編寫JS程序,從另一方面來說围俘,也許他們無意中就寫了一段產(chǎn)生閉包的代碼砸讳,自己卻毫不知情
何為閉包
在解釋一個(gè)事物之前,一般都需要對(duì)其進(jìn)行概念抽象界牡,我想簿寂,閉包的概念可以定義為:所謂閉包, 即一個(gè)方法內(nèi)部能夠持續(xù)的訪問其語義作用域(包括其嵌套作用域)宿亡,即使對(duì)該方法的調(diào)用發(fā)生在該語義作用域之外(如果對(duì)語義作用域的概念不了解常遂,可以參考:JS的作用域),這句概念定義過于抽象挽荠,下面舉例來說明:
function foo() {
var a = 2;
function bar() {
console.log( a );
}
return bar;
}
var baz = foo();
baz(); // 2
再一張圖例來解釋這段程序
如果基于該代碼示例對(duì)閉包概念進(jìn)行重新描述可以是:語義作用域
foo
內(nèi)部的方法bar()
存在對(duì)foo
的內(nèi)部變量a
的引用克胳,此處即產(chǎn)生了閉包,然后即便在語義作用域foo
外通過方法bar()
的引用baz()
調(diào)用方法bar()
圈匆,此時(shí)依然可以訪問變量a
漠另,并得到它的值;需要注意的是跃赚,在bar()
方法內(nèi)部引用變量a
時(shí)閉包已經(jīng)產(chǎn)生酗钞,或者稱之為方法bar()
在語義作用域foo
上產(chǎn)生了一個(gè)閉包,而在語義作用域foo
外對(duì)bar()
的調(diào)用只是讓閉包顯現(xiàn)的方式来累,并不是在此處產(chǎn)生閉包,那么進(jìn)一步也可以說窘奏,在方法bar()
內(nèi)部通過語義作用域的變量找尋規(guī)則持有語義作用域foo
的變量a
的訪問權(quán)即是閉包最重要的實(shí)質(zhì)(也是唯一的實(shí)質(zhì))
閉包的使用
當(dāng)學(xué)到一門新技術(shù)或語言的新特性嘹锁,很多人都想知道其應(yīng)用場(chǎng)景,并迫不及待的在下一次實(shí)戰(zhàn)中進(jìn)行使用着裹,這是一種好的學(xué)習(xí)新知識(shí)的方式领猾,但我認(rèn)為對(duì)于閉包,很多時(shí)候不是你不會(huì)用骇扇,而是你的代碼已經(jīng)產(chǎn)生了閉包自己卻渾然不知摔竿,所以我認(rèn)為我們需要做的是了解閉包的概念并在自己的JS代碼中找尋自己已經(jīng)不經(jīng)意間寫出的閉包,進(jìn)一步加深對(duì)其的認(rèn)識(shí)少孝,然后做到從無意識(shí)的產(chǎn)生閉包到有意識(shí)的利用閉包继低,需要記住:閉包在JS中無處不在稍走,下面我將給出閉包的幾種典型應(yīng)用場(chǎng)景并簡(jiǎn)單羅列不合理的使用閉包會(huì)帶來哪些問題:
- 場(chǎng)景一:方法回調(diào)
在JS中袁翁,存在著大量的回調(diào)柴底,這種回調(diào)也是JS異步編程的基礎(chǔ),同時(shí)也彌補(bǔ)了JS單線程運(yùn)作的缺陷粱胜,來看代碼:
在函數(shù)function wait(message) { setTimeout( function timer(){ console.log( message ); }, 1000 ); } wait( "Hello, closure!" );
setTimeout()
中存在一個(gè)回調(diào)函數(shù)timer()
柄驻,通過閉包持有其語義作用域中變量message
的引用(產(chǎn)生閉包),那么就可以在語義作用域wait()
的外部調(diào)用wait()
方法并給message
設(shè)值 - 場(chǎng)景二:IIFE(Invoking Function Expressions Immediately焙压,具體可參考JS的作用域)
IIFE作為一種簡(jiǎn)單的作用域隔離方法在JS中也有大量的使用鸿脓,同時(shí)IIFE也經(jīng)常與閉包一起使用,來看代碼:
通過閉包涯曲,在IIFE內(nèi)部可以訪問外部作用域的變量var a = 2; (function IIFE(){ console.log( a ); })();
- 場(chǎng)景三:模塊化編程
隨著前端工程化的發(fā)展野哭,為了方便組織,JS的代碼組織已經(jīng)越來越趨向于模塊化掀抹,而模塊里存在大量的閉包虐拓,來看代碼:
其實(shí)模塊化的主要目的在于作用域隔離,而基于閉包傲武,各模塊內(nèi)部可以互不干擾的進(jìn)行自身的功能擴(kuò)展蓉驹,當(dāng)然上面的代碼只是舉例,實(shí)際的模塊化編寫形式不是這樣的揪利,但本質(zhì)不變function CoolModule() { var something = "cool"; var another = [1, 2, 3]; function doSomething() { console.log( something ); } function doAnother() { console.log( another.join( " ! " ) ); } return { doSomething: doSomething, doAnother: doAnother }; } var foo = CoolModule(); foo.doSomething(); // cool foo.doAnother(); // 1 ! 2 ! 3
- 問題一:閉包導(dǎo)致的大量無用數(shù)據(jù)得不到回收
這是一段很常見的處理特定元素function doSomething(selector) { var someReallyBigData = { .. }; process( someReallyBigData ); $( selector ).click( function activator(){ //doSomething with selector } ); }
click
事件的代碼态兴,很明顯由于引用了外部作用域變量selector
,此時(shí)閉包已經(jīng)產(chǎn)生疟位,點(diǎn)擊后函數(shù)正常觸發(fā)瞻润,一切OK,但是需要注意甜刻,由于在click
事件代碼的上方绍撞,有關(guān)于someReallyBigData
的處理,我們稱之為大量臨時(shí)數(shù)據(jù)的處理得院,正常來講傻铣,JS的垃圾回收機(jī)制應(yīng)該會(huì)及時(shí)的將這些大量臨時(shí)數(shù)據(jù)回收掉,遺憾的是祥绞,由于閉包的存在非洲,JS并不會(huì)這么做;那么該怎么辦呢蜕径?一種方法是使用塊級(jí)作用域两踏,如:
改進(jìn)后的寫法里,將大量臨時(shí)數(shù)據(jù)的處理放置于外部作用域的塊級(jí)作用域中兜喻,它不會(huì)受到閉包的影響梦染,在執(zhí)行完成后會(huì)被JS的垃圾回收機(jī)制及時(shí)清理function doSomething(selector) { { var someReallyBigData = { .. }; process( someReallyBigData ); } $( selector ).click( function activator(){ //doSomething with selector } ); }
- 問題二:循環(huán)體中不合理的使用閉包
在循環(huán)體內(nèi)使用閉包也是JS很常見的寫法,但需要注意的是朴皆,這種寫法稍不注意就會(huì)產(chǎn)生錯(cuò)誤的結(jié)果弓坞,來看代碼:
我想隧甚,寫這段代碼的人肯定是希望實(shí)現(xiàn)"每隔一秒執(zhí)行一次打印操作,并且打印的值逐次遞增渡冻,一共打印5次"戚扳,但實(shí)際的結(jié)果卻是打印5個(gè)6,究其原因在于通過for (var i=1; i<=5; i++) { setTimeout( function timer(){ console.log( i ); }, i*1000 ); }
timer()
訪問外部作用域變量i
的值時(shí)族吻,由于已經(jīng)延時(shí)了一秒帽借,此時(shí)i的值已經(jīng)循環(huán)了5次,變成了6超歌,5次調(diào)用timer()
砍艾,5次皆通過閉包獲取到的是i
的最新值,該場(chǎng)景下你也許不想使用閉包巍举,但是很遺憾脆荷,這段代碼就是簡(jiǎn)單直接的產(chǎn)生了閉包并使用了其特性;如何規(guī)避呢懊悯?看改進(jìn)后的代碼:
運(yùn)行這段代碼后發(fā)現(xiàn)正是我們想要的結(jié)果蜓谋,下面來分析這段代碼:閉包依然存在,不同的是5次循環(huán)炭分,每一次for (var i=1; i<=5; i++) { (function(j){ setTimeout( function timer(){ console.log( j ); }, j*1000 ); })( i ); }
timer()
的閉包都是針對(duì)一個(gè)新的作用域(IIFE所產(chǎn)生的作用域)桃焕,每個(gè)新的作用域里j
值各不相同(每次循環(huán)加1),所以閉包雖然依然存在捧毛,但得到的卻是正確的結(jié)果
總結(jié)
本文對(duì)閉包的概念進(jìn)行了解釋观堂,并給出了產(chǎn)生閉包的典型場(chǎng)景和需要注意的點(diǎn),雖然實(shí)際的情況會(huì)比本文所列舉的實(shí)例更復(fù)雜呀忧,更多樣师痕,但萬變不離其中,把握閉包的本質(zhì)而账,就能合理的利用閉包帶來的魔力七兜,為我所用;同時(shí)需要注意福扬,閉包不是一個(gè)你需要努力掌握并刻意使用的技術(shù),它只是基于JS的其他特性自然產(chǎn)生(就如本文中一直用的一個(gè)詞是產(chǎn)生閉包)的一種特性惜犀,你需要做的就是了解它铛碑,擁抱它