首頁 > web前端 > js教程 > 主體

詳談JavaScript的閉包及應用

高洛峰
發布: 2017-01-20 11:16:36
原創
1146 人瀏覽過

閉包真的是學過一遍又一遍,Js博大精深,每次學習都感覺有新的收穫。相信大家封裝前端插件時,閉包是不可或缺的。閉包的真正好處我個人認為除了封裝還是封裝,能帶個我們私有方法,和調用上的靈活方便,也會使你的程式碼對外的物件保持乾淨整潔。

進入正題

維基百科這樣定義了JS閉包:在計算機科學中,閉包(英語:Closure),又稱詞法閉包(Lexical Closure)或函數閉包(function closures),是引用了自由包(Lexical Closure)或函數閉包(function closures),是引用了自由包變數的函數。這個被引用的自由變數將會和這個函數一同存在,即使已經離開了創造它的環境也不例外。所以,有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體。閉包在運行時可以有多個實例,不同的引用環境和相同的函數組合可以產生不同的實例。

通俗的講,閉包不同於一般函數,它允許一個函數在立即此法調用的作用域外,仍可訪問非本地變數。我還想說,閉包的語法讓你的程式碼更有動感,下面的一段程式碼可能會讓你有所感動。

<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;
 }());//立即执行
 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下面,我通常喜歡定義一個全局的名為application的對象,代表整個應用公用的頂級對象,你可以在其中向外暴露很多公共的操作方法,也可以在其中做一些私有的處理,以防外部呼叫導致某些問題。在所定義的「頂級」application物件下,你也可以將你所非要不可的全域變數定義在其中,這樣以防普通全域變數對應用程式造成的影響,又可以在你定義的閉包內,透過向外暴露的物件表達更明確的訊息,我一直認為,隨便定義一個JS全域變數實在是太可恥了。

閉包的寫法加上VS強大的智慧提示,你會感覺到無比的暢快。下面我又附加了一個方法

(function () {
  var baseUrl = "www.cnblogs.com/tdws/";
 
  application.getBaseUrl = function () {
  return baseUrl;
  }
 }());
 console.log(application.getBaseUrl());//www.cnblogs.com/tdws/
登入後複製

 詳談JavaScript的閉包及應用  

寫在最後

你不覺得把變數保留起來,暴露出一系列get方法,很動感嗎╮(╯-╰).. ....

當然閉包也需要你恰當的使用,不要造成循環引用,因為它將導致記憶體洩漏。不要做無謂的閉包,造成你空間的浪費,因為閉包不會被釋放。不要處處閉包,因為它將增加你程式碼的複雜度。

以上就是本文的全部內容,希望本文的內容對大家的學習或工作能帶來一定的幫助,同時也希望多多支持PHP中文網!

更多詳談JavaScript的閉包及應用相關文章請關注PHP中文網!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板