javascript閉包不完全探索記錄01：閉包？啥餡的？

TANKING 發(fā)布于2019-08-21 17:41 / 2859人閱讀

摘要：閉包一詞來源于以下兩者的結(jié)合要執(zhí)行的代碼塊由于自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放和為自由變量提供綁定的計(jì)算環(huán)境作用域。在以及及以上等語言中都能找到對閉包不同程度的支持。

溫馨提示：作者的爬坑記錄，對你等大神完全沒有價(jià)值，別在我這浪費(fèi)生命

閉包，好吃嗎？

第一次聽到這個(gè)詞，很不幸是在一次面試中，可想而知結(jié)果很細(xì)碎，從此“閉包”和“跨域”在我匱乏的前端知識中成為了兩座無法翻閱的大山，即便一度轉(zhuǎn)設(shè)計(jì)，還是活在他們的陰影之下。

不過怎么說呢。緣，妙不可言，感謝某司讓我猝不及防的重新走上了前端之路，既然又走回來了，一個(gè)前端工程師的（偽）的自尊告訴我這回必須要?jiǎng)傉媪?/p>

一聽這個(gè)詞，我就一臉懵逼，這是個(gè)名詞，還是個(gè)動(dòng)詞？這是個(gè)包？還是個(gè)什么操作？我覺得對這個(gè)詞本身的認(rèn)識，在了解一個(gè)事物上非常重要，而且經(jīng)驗(yàn)告訴我對于這種看上去就知道是被專（hu）業(yè)（bi）翻譯過來的外來詞匯，千萬不要嘗試通過中文字面意義去理解他，一定要去看看它在英文中的意思

closure    英[?kl????(r)] 美[?klo???(r)]
n.結(jié)束; （永久的） 停業(yè)，關(guān)閉; [電] 閉合; [數(shù)] 閉包;
vt.    使結(jié)束，使終止; 使停止辯論;

這下明白了，這貨是個(gè)名詞，這下對他能有一個(gè)客觀的認(rèn)識了，“閉包”這個(gè)詞，他就是一個(gè)東西，一個(gè)結(jié)束了，關(guān)閉了，閉合了的東西

下面在看看*度百科上面定義

閉包包含自由（未綁定到特定對象）變量；這些變量不是在這個(gè)代碼塊內(nèi)或者任何全局上下文中定義的，而是在定義代碼塊的環(huán)境中定義（局部變量）。“閉包” 一詞來源于以下兩者的結(jié)合：要執(zhí)行的代碼塊（由于自由變量被包含在代碼塊中，這些自由變量以及它們引用的對象沒有被釋放）和為自由變量提供綁定的計(jì)算環(huán)境（作用域）。在PHP、Scala、Scheme、Common Lisp、Smalltalk、Groovy、JavaScript、Ruby、 Python、Go、Lua、objective c、swift 以及Java（Java8及以上）等語言中都能找到對閉包不同程度的支持。

怎么說呢，我堅(jiān)信這不是人話，經(jīng)過翻譯，說了兩件事：

閉包中有一堆不被釋放的變量（這就明白什么為什么叫closure了）

很多語言都有（本文只看javascript）

閉包，什么樣？

經(jīng)過上面對閉包概念的初步理解，知道了這是一個(gè)包含一堆沒有被釋放的變量的東西，那這貨在javascript中到底是以什么樣的形式存在的呢？

知乎上的相關(guān)回答五花八門，從各個(gè)角度都有很是精彩但是容易懵逼
如何才能通俗易懂的解釋javascript里面的‘閉包’？ - 知乎
所以不妨先去看看大神相對“正統(tǒng)”博文
學(xué)習(xí)Javascript閉包（Closure）- 阮一峰
JavaScript之作用域與閉包詳解 - 默語

總之，大家都提到了要從javascript變量的作用域的一個(gè)特點(diǎn)開始說起

變量的作用域無非就是兩種：全局變量和局部變量。
Javascript語言的特殊之處，就在于函數(shù)內(nèi)部可以直接讀取全局變量。

每次定義一個(gè)函數(shù)，都會(huì)產(chǎn)生一個(gè)作用域鏈（scope chain）。當(dāng)JavaScript尋找變量varible時(shí)（這個(gè)過程稱為變量解析），總會(huì)優(yōu)先在當(dāng)前作用域鏈的第一個(gè)對象中查找屬性varible ，如果找到，則直接使用這個(gè)屬性；否則，繼續(xù)查找下一個(gè)對象的是否存在這個(gè)屬性；這個(gè)過程會(huì)持續(xù)直至找到這個(gè)屬性或者最終未找到引發(fā)錯(cuò)誤為止。

可以理解為，javascript有一個(gè)特點(diǎn)，就是在函數(shù)中，有“作用域鏈”這么個(gè)東西，大概意思是，你作為函數(shù)中的一個(gè)變量，在找自己的值的時(shí)候，是從里往外找的，你要先看自己所在函數(shù)中有沒有給你賦值，沒有就往外走，看看你外面一層有沒有，直到找到或者找不到報(bào)錯(cuò)為止。
因?yàn)橛羞@個(gè)原理的存在，也就能解釋為什么函數(shù)內(nèi)部可以讀取外部的變量了

下面我們來做個(gè)實(shí)驗(yàn)：

var a = "a";
var b = "b";
function test(){
    var c = "c";
    var b = "d"
    function testInner(){
        console.log(a);//a
        console.log(b);//d
        console.log(c);//c
    }
    testInner();
}
test();
console.log(b);//b,
console.log(d);//ReferenceError: d is not defined

結(jié)果可知：

函數(shù)內(nèi)部可以讀取外部函數(shù)變量，以及全局變量,并且是由內(nèi)向外讀取的

函數(shù)外部無法讀取內(nèi)部的變量（廢話）

那如果我們要是想在外面get到函數(shù)內(nèi)部變量的值呢？這個(gè)變量誰知道呢，答案是顯而易見的

他的內(nèi)部函數(shù)是可以讀取他外部函數(shù)變量的，而這個(gè)內(nèi)部函數(shù)就是一個(gè)閉包
//下文有更新

講個(gè)故事來說，老王對自己的兒子小王（內(nèi)部函數(shù)）是無話不說的，但是對自己的老婆（老王的上一層）卻習(xí)慣性裝傻，于是王太太就只能通過小王知道老王的私房錢在哪了，而這個(gè)帶著私房錢信息的小王就是閉包。

這就又有一個(gè)問題了，王太太是怎么找到小王的呢／外部如何才能得到內(nèi)部函數(shù)的呢，這簡單，老王喝多了自己讓王太太帶小王去玩的／函數(shù)將內(nèi)部函數(shù)作為返回值

看下面這個(gè)例子：

function getMoneyInfo(){
    var moneyInfo = "馬桶水箱里";
    function askXiaoWang(){
        return moneyInfo
    }
    return askXiaoWang()
}
console.log(getMoneyInfo())//馬桶水箱里
console.log(moneyInfo)//ReferenceError: moneyInfo is not defined

看到這里，感覺對閉包是個(gè)啥，以及是怎么來的有了個(gè)大概的認(rèn)識，但是他具體是干啥的，有什么非用不可的好處，以及除了面試到底有什么應(yīng)用場景，將在今后繼續(xù)學(xué)習(xí)！

看到這里的都是真愛

20171126：更正與補(bǔ)充
經(jīng)過對各大神的博文再次閱讀，發(fā)現(xiàn)上文有些事情還是沒說清楚：

既然closure有閉合和結(jié)束的意思，那到底是什么被關(guān)閉和結(jié)束了呢，也就是說是什么保持了一個(gè)不變的狀態(tài)呢
是這個(gè)函數(shù)以及其所引用的變量

閉包的產(chǎn)生，之所以是closure，是因?yàn)橛捎谠诟鈱诱{(diào)用了內(nèi)部的函數(shù)，所以與這個(gè)函數(shù)所相關(guān)的一切都不能在外層工作完成前被釋放，這也就是所謂的閉合和結(jié)束了，也就是會(huì)一直保持一種不變的狀態(tài)。

說句人話，按照老王之前的習(xí)慣，私房錢(似有變量)用完了，下次再有私房錢(函數(shù)再次被調(diào)用)就換個(gè)地方(內(nèi)存中)，老婆根本不可能找得到，但是現(xiàn)在有了小王(內(nèi)部函數(shù))在，他一直被他媽安排盯著廁所水箱，老王就是想花錢都沒法花了，對他來說，這點(diǎn)錢算是結(jié)束（closure）了,而在這看著錢的小王，就是一個(gè)所謂的閉包了