歡迎您光臨本站 註冊首頁

Javascript中的暗物質:閉包

←手機掃碼閱讀     火星人 @ 2014-03-09 , reply:0

  1. 詭異的閉包

  javascript 中有一個特殊的特性 - 閉包,對於 .NET 程序員來說,比較熟悉的是面向對象的程序設計 OOP, 而來自函數式語言的閉包則顯得比較詭異,許多程序員對它敬而遠之.

  對於閉包我們還是要從函數式語言的特點說起.

  不知道你有沒有發現,在 javascript 中沒有 public ,private 之類的關鍵字,也沒有 class ,雖然也存在對象一說,但是對象的地位遠遠沒有在 C# 中是一等公民,在 js 中,沒有對象你也可以一樣寫程序.它只是一種數據的表示形式而已,可有也可無.

  2. 閉包何來?

  如何在 javascript 實現數據的保護呢?閉包就是實現它的利器,這需要我們放下普通的對象,理解一下 javascript 的工作原理.

  在 javascript 中,可以在函數中定義新的函數,這種嵌套函數還可以作為函數的返回值,被外部的變數所引用.在普通的程序設計語言中,比如 C 中,雖然也存在函數指針的概念,但是,所謂的函數指針僅僅是一段代碼的地址而已,而 javascript 中返回的函數引用,則不限於此.

  在 C 語言中,在函數運行的時候,局部變數是保存在堆棧中的,函數執行完畢,系統所做的是彈出堆棧.

  實際上,在 javascript 中,函數每次執行的時候,注意是運行時,系統會同時創建一個此次函數運行的環境對象,而此次運行期間的局部變數則關聯在這個環境對象上,在普通不返回函數 的普通函數中,函數執行完畢,則環境對象也一起釋放.而如果函數返回了定義在外部函數中的嵌套函數,那麼,這個環境對象將不會釋放,也就是說,這個時候, 返回了一個看得見的函數對象,還附帶了一個看不見的暗物質 - 外部函數的環境對象.

  看得見的函數對象加上隱含的環境對象就是閉包.

  這個環境對象只能通過這個函數隱式訪問,我們並沒有它的引用,也無法直接訪問它.結果就是實現了信息的隱藏.

  3. 實現私有的數據

  考慮下面的代碼

  function outer() {

  var name = "Alice";

  var inner = function () {

  return name;

  }

  return inner;

  } var fn = outer();

  alert(fn());

  在這個例子中,看起來簡單的 fn 函數背後,其實暗藏了在執行 outer 函數時期創建的環境對象,所以通過 fn 可以得到 Alice 這個名字,沒有其他的渠道允許得到這個名字.

  4. 為什麼數據搞亂了?

  再看另外一個經典的例子.

  <body>

  <div>

  <a href="#">Click Me!</a>

  <a href="#">Click Me!</a>

  <a href="#">Click Me!</a>

  </div>

  <script type ="text/javascript">

  function main(links) {

  for (var i = 0; i < links.length; i ) {

  links[i].onclick = function () {

  alert(i 1);

  }

  }

  };

  main(document.getElementsByTagName("a"));

  </script>

  </body>

  彈出的是多少呢?感覺有三次循環,應該彈出 1, 2, 3.運行一下,你會看到實際上是 4, 4, 4!

  是不是非常詭異?

  從閉包的角度來說,則非常簡單,main 函數執行了幾次呢?只有一次,在執行的時候創建了一個閉包對象,其中引用了定義在 main 中的局部變數 i,在循環體中,實際上創建了三個內部函數,它們引用的都是同一個環境對象.這些函數註冊到鏈接的 onclick 事件上,其實也就是已經傳出了函數 main,所以,main 的環境對象也就悄悄地成為了暗物質,而循環完成之後 i 已經最終被賦予了 3 這個值,三個函數訪問的是同一個環境對象中的 i, 所以,在點擊鏈接的時候看到 4 這個結果也就正常了.

  5. 解鈴還需系鈴人

  如果希望得到的是 1, 2, 3 這個結果又該怎麼辦呢?

  我們可以定義一個內部函數,讓它執行三次,這個將會創建三個對應的環境對象,我們可以是的這三個環境對象包含不同的值.

  function main(links) {

  var inner = function (elem, i) {

  elem.onclick = function () {

  alert(i 1);

  };

  };

  for (var i = 0; i < links.length; i ) {

  var elem = links[i];

  inner(elem, i);

  } };

  由於 inner 函數執行了三次,所以將會創建三個不同的環境對象,每個環境對象中的 i 都是不同的值.這樣註冊到 onclick 中的函數就可以訪問到不同的值了.

  閉包的概念

  這裡,我們可以看一下閉包的概念了.來自 Wiki 的說明是這樣的

  在計算機科學中,閉包(Closure)是詞法閉包(Lexical Closure)的簡稱,是引用了自由變數的函數.這個被引用的自由變數將和這個函數一同存在,即使已經離開了創造它的環境也不例外.所以,有另一種說法認為閉包是由函數和與其相關的引用環境組合而成的實體.


[火星人 ] Javascript中的暗物質:閉包已經有868次圍觀

http://coctec.com/docs/java/show-post-59790.html