說說JS中那個(gè)神奇的存在-Closure(閉包)

在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

再一張圖例來解釋這段程序

closure_desc.png

如果基于該代碼示例對(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)作的缺陷粱胜,來看代碼:
    function wait(message) {
        setTimeout( function timer(){
          console.log( message );
        }, 1000 );
    }
    
    wait( "Hello, closure!" );
    
    在函數(shù)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)常與閉包一起使用,來看代碼:
    var a = 2;
    
    (function IIFE(){
        console.log( a );
    })();
    
    通過閉包涯曲,在IIFE內(nèi)部可以訪問外部作用域的變量
  • 場(chǎng)景三:模塊化編程
    隨著前端工程化的發(fā)展野哭,為了方便組織,JS的代碼組織已經(jīng)越來越趨向于模塊化掀抹,而模塊里存在大量的閉包虐拓,來看代碼:
    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
    
    其實(shí)模塊化的主要目的在于作用域隔離,而基于閉包傲武,各模塊內(nèi)部可以互不干擾的進(jìn)行自身的功能擴(kuò)展蓉驹,當(dāng)然上面的代碼只是舉例,實(shí)際的模塊化編寫形式不是這樣的揪利,但本質(zhì)不變
  • 問題一:閉包導(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í)作用域两踏,如:
    function doSomething(selector) {
        {
            var someReallyBigData = { .. };
            process( someReallyBigData );
        }
        $( selector ).click( function activator(){
            //doSomething with selector
        } );
    }
    
    改進(jìn)后的寫法里,將大量臨時(shí)數(shù)據(jù)的處理放置于外部作用域的塊級(jí)作用域中兜喻,它不會(huì)受到閉包的影響梦染,在執(zhí)行完成后會(huì)被JS的垃圾回收機(jī)制及時(shí)清理
  • 問題二:循環(huán)體中不合理的使用閉包
    在循環(huán)體內(nèi)使用閉包也是JS很常見的寫法,但需要注意的是朴皆,這種寫法稍不注意就會(huì)產(chǎn)生錯(cuò)誤的結(jié)果弓坞,來看代碼:
    for (var i=1; i<=5; i++) {
        setTimeout( function timer(){
            console.log( i );
        }, i*1000 );
    }
    
    我想隧甚,寫這段代碼的人肯定是希望實(shí)現(xiàn)"每隔一秒執(zhí)行一次打印操作,并且打印的值逐次遞增渡冻,一共打印5次"戚扳,但實(shí)際的結(jié)果卻是打印5個(gè)6,究其原因在于通過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)后的代碼:
    for (var i=1; i<=5; i++) {
        (function(j){
            setTimeout( function timer(){
                console.log( j );
            }, j*1000 );
        })( i );
    }
    
    運(yùn)行這段代碼后發(fā)現(xiàn)正是我們想要的結(jié)果蜓谋,下面來分析這段代碼:閉包依然存在,不同的是5次循環(huán)炭分,每一次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)生閉包)的一種特性惜犀,你需要做的就是了解它铛碑,擁抱它

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市虽界,隨后出現(xiàn)的幾起案子汽烦,更是在濱河造成了極大的恐慌,老刑警劉巖莉御,帶你破解...
    沈念sama閱讀 222,807評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件撇吞,死亡現(xiàn)場(chǎng)離奇詭異俗冻,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)牍颈,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門迄薄,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人煮岁,你說我怎么就攤上這事讥蔽。” “怎么了画机?”我有些...
    開封第一講書人閱讀 169,589評(píng)論 0 363
  • 文/不壞的土叔 我叫張陵冶伞,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我步氏,道長(zhǎng)响禽,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 60,188評(píng)論 1 300
  • 正文 為了忘掉前任荚醒,我火速辦了婚禮芋类,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘腌且。我一直安慰自己梗肝,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評(píng)論 6 398
  • 文/花漫 我一把揭開白布铺董。 她就那樣靜靜地躺著巫击,像睡著了一般。 火紅的嫁衣襯著肌膚如雪精续。 梳的紋絲不亂的頭發(fā)上坝锰,一...
    開封第一講書人閱讀 52,785評(píng)論 1 314
  • 那天,我揣著相機(jī)與錄音重付,去河邊找鬼顷级。 笑死,一個(gè)胖子當(dāng)著我的面吹牛确垫,可吹牛的內(nèi)容都是我干的弓颈。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評(píng)論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼删掀,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼翔冀!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起披泪,我...
    開封第一講書人閱讀 40,167評(píng)論 0 277
  • 序言:老撾萬榮一對(duì)情侶失蹤纤子,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體控硼,經(jīng)...
    沈念sama閱讀 46,698評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡泽论,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評(píng)論 3 343
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了卡乾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片翼悴。...
    茶點(diǎn)故事閱讀 40,912評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖说订,靈堂內(nèi)的尸體忽然破棺而出抄瓦,到底是詐尸還是另有隱情,我是刑警寧澤陶冷,帶...
    沈念sama閱讀 36,572評(píng)論 5 351
  • 正文 年R本政府宣布钙姊,位于F島的核電站,受9級(jí)特大地震影響埂伦,放射性物質(zhì)發(fā)生泄漏煞额。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評(píng)論 3 336
  • 文/蒙蒙 一沾谜、第九天 我趴在偏房一處隱蔽的房頂上張望膊毁。 院中可真熱鬧,春花似錦基跑、人聲如沸婚温。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽栅螟。三九已至,卻和暖如春篱竭,著一層夾襖步出監(jiān)牢的瞬間力图,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評(píng)論 1 274
  • 我被黑心中介騙來泰國(guó)打工掺逼, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留吃媒,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評(píng)論 3 379
  • 正文 我出身青樓吕喘,卻偏偏與公主長(zhǎng)得像赘那,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子氯质,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容