詳談JavaScript的閉包及應(yīng)用
閉包真的是學(xué)過一遍又一遍,Js博大精深,每次學(xué)習(xí)都感覺有新的收獲。相信在大家封裝前端插件時(shí),閉包是必不可少的。閉包的真正好處我個(gè)人認(rèn)為除了封裝還是封裝,能帶個(gè)我們私有方法,和調(diào)用上的靈活方便,也會(huì)使你的代碼對(duì)外的對(duì)象保持干凈整潔。
進(jìn)入正題
維基百科這樣定義了JS閉包:在計(jì)算機(jī)科學(xué)中,閉包(英語:Closure),又稱詞法閉包(Lexical Closure)或函數(shù)閉包(function closures),是引用了自由變量的函數(shù)。這個(gè)被引用的自由變量將和這個(gè)函數(shù)一同存在,即使已經(jīng)離開了創(chuàng)造它的環(huán)境也不例外。所以,有另一種說法認(rèn)為閉包是由函數(shù)和與其相關(guān)的引用環(huán)境組合而成的實(shí)體。閉包在運(yùn)行時(shí)可以有多個(gè)實(shí)例,不同的引用環(huán)境和相同的函數(shù)組合可以產(chǎn)生不同的實(shí)例。
通俗的講,閉包不同于一般函數(shù),它允許一個(gè)函數(shù)在立即此法調(diào)用的作用域外,仍可訪問非本地變量。我還想說,閉包的語法讓你的代碼更加動(dòng)感,下面的一段代碼可能會(huì)讓你有所感觸。
<script> (function () { var userToken = "this is my token"; var someConfig = "opening some function"; var privateValue = "private"; var publicValue = "public"; var appObj = {}; function myPrivateFunc() { alert(privateValue) } appObj.getUserToken = function () { //some logic userToken += " after some inner logic"; return userToken; } appObj.publicVal = publicValue; window.application = appObj; }());//立即執(zhí)行 console.log(application.getUserToken());//this is my token after some inner logic console.log(application.publicVal);//public console.log(application.privateValue); //undefined application.myPrivateFunc(); //error </script>
我將appObj附加到window下面,我通常喜歡定義一個(gè)全局的名為application的對(duì)象,代表著整個(gè)應(yīng)用公用的頂級(jí)對(duì)象,你可以在其中向外暴露很多公共的操作方法,也可以在其中做一些私有的處理,以防外部調(diào)用導(dǎo)致某些問題。在所定義的“頂級(jí)”application對(duì)象下,你也可以將你所非要不可的全局變量定義在其中,這樣以防普通全局變量對(duì)應(yīng)用造成的影響,又可以在你定義的閉包內(nèi),通過向外暴露的對(duì)象表達(dá)更明確的信息,我一直認(rèn)為,隨隨便便定義一個(gè)JS全局變量實(shí)在是太可恥了。
閉包的寫法加上VS強(qiáng)大的智能提示,你會(huì)感覺到無比的暢快。下面我又附加了一個(gè)方法
(function () { var baseUrl = "www.cnblogs.com/tdws/"; application.getBaseUrl = function () { return baseUrl; } }()); console.log(application.getBaseUrl());//www.cnblogs.com/tdws/
寫在最后
你不覺得把變量保留起來,暴露出一系列g(shù)et方法,很動(dòng)感嗎 ╮(╯-╰)╭ 攤手......
當(dāng)然閉包也需要你恰當(dāng)?shù)氖褂茫?span style="color: #ff0000">不要造成循環(huán)引用,因?yàn)樗鼘?dǎo)致內(nèi)存泄漏。不要做無謂的閉包,造成你空間的浪費(fèi),因?yàn)殚]包不會(huì)被釋放。不要處處閉包,因?yàn)樗鼘⒃黾幽愦a的復(fù)雜性。
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
cropper js基于vue的圖片裁剪上傳功能的實(shí)現(xiàn)代碼
這篇文章主要介紹了cropper js基于vue的圖片裁剪上傳功能的相關(guān)資料,需要的朋友可以參考下2018-03-03js點(diǎn)擊button按鈕跳轉(zhuǎn)到另一個(gè)新頁面
點(diǎn)擊按鈕怎么跳轉(zhuǎn)到另外一個(gè)頁面呢?點(diǎn)擊圖片要跳轉(zhuǎn)到新的頁面時(shí),怎么做到呢?可以使用onclick=window.location=新頁面來實(shí)現(xiàn)2014-10-10Linux下編譯安裝php libevent擴(kuò)展實(shí)例
這篇文章主要介紹了Linux下編譯安裝php libevent擴(kuò)展實(shí)例,本文著重講解了編譯過程中一個(gè)錯(cuò)誤解決方法,需要的朋友可以參考下2015-02-02javascript獲取隱藏元素(display:none)的高度和寬度的方法
這篇文章主要介紹了javascript獲取隱藏元素(display:none)的高度和寬度的方法,實(shí)現(xiàn)方法比較復(fù)雜,需要的朋友可以參考下2014-06-06一文搞懂JavaScript如何實(shí)現(xiàn)圖片懶加載
圖片懶加載,往往作為減少首頁白屏?xí)r間的一個(gè)解決方案而出現(xiàn)。本文將通過示例帶大家一起探究一下JavaScript是如何實(shí)現(xiàn)圖片懶加載的,感興趣的可以了解一下2022-06-06JavaScript宏任務(wù)和微任務(wù)區(qū)別介紹
這篇文章主要介紹了JavaScript宏任務(wù)和微任務(wù)區(qū)別介紹,js中的任務(wù),大致分為2類,一類是同步任務(wù),另一類是異步任務(wù)。而異步任務(wù),又分為宏任務(wù)和微任務(wù),這兩個(gè)任務(wù)是兩個(gè)隊(duì)列,所以是先進(jìn)先出的2022-07-07