JavaScript專題（二）閉包

前言 - ES6 以前，JS沒有塊級做用域，只有全局做用域和函數做用域

用了許久ES6，春招在即，重寫下博文。
仍是講講閉包。咱們要知其然，知其因此然。

彷彿大衆情人通常，不少前端面試官都會問一問，說來複雜，說來也簡單。就是這種既能夠複雜又能夠簡單的東西每每讓面試官能收穫不少(對被面試者也是如此)。

閉包所謂的專業定義：閉包是指有權訪問另外一個函數做用域中的變量的函數。

其實這是一句後話，對於入門者來講毫無做用。一個不會喝酒的人，忽然喝了一杯高濃度的酒，它只會醉倒，而不會體味到其中酒的美好滋味。只有閱盡千帆，纔可能化繁爲簡。只有不斷打磨本身的語言，最後產出的才能是最簡練的東西。所謂知識儲備。

---

一. 閉包是什麼？它來自哪裏，又是什麼模樣

專業定義實際上是真正理解後再來看的。你們都肌肉記憶了，天然以爲簡單。
咱們只須要明白咱們要關注的：做用域。函數。變量。

因此咱們直接來看幾個閉包的例子吧。

• 例子A.局部變量

  function out() {
    var a = 3;
  }
  out();
  console.log(a); // error，報錯

  a是局部變量。咱們從 全局獲取 a，而且獲得了失敗的結果。

• 例子B.函數的調用 - 這就是閉包！！！

  function out() {
    var a = 3;
    function closure() {
      console.log(a);
    }
    closure();
  }
  out(); // 3

  a仍是局部變量，被函數內部的 closure 調用了。out 內部 先聲明、後調用 了 closure。
  這一次，咱們從 全局(其實依靠了外物out), whatever 獲取 a -> 成功了。

  其實閉包從例子B就結束了。訪問另外一個函數做用域中的變量的函數便是閉包。然而人們老是要探尋其中的原理，因此纔有了大量的後文。

• 例子C.經典例子 -- 經常使用於給list數組裏面的每一個item挨個綁定函數

  var oBtn = [];
  for (var i = 0; i < 6; i++) {
    oBtn[i] = function () {
      console.log(i);
    }
    // oBtn[i]();
  }
  oBtn[0](); // 6
  for (k = 0; k < 6; k++) {
    oBtn[k]();              // 6個 6
  }

例子C的出現是爲何呢？咱們先來看正確解答。

---

二. 閉包引發的問題的逐句分析

參考至 http://www.javashuo.com/article/p-wrbxeylq-gw.html

1.var oBtn = []; // 定義一個數組(在咱們日常使用中一般獲取的是html節點數組)

2.for (var i = 0; i < 6; i++) // 用 var 聲明，因此 i 是全局變量，不在局部做用域中

for (var i = 0; i < 6; i++) {}
console.log(i); // 6   所謂的 跳出三界外，不在五行中！！！全局能夠訪問到 i.

3.oBtn[i] = function() { console.log(i); } 這裏進行了一個 變量賦值 操做。

注意，只是賦值。沒有進入 執行環境。因此，這裏的 i 實際上是尚未被肯定的。因爲for循環不具備塊級做用域，因此這裏的函數定義就是全局做用域。

4.var i = 1; // 到了第二次循環，這時候的 var i=1 覆蓋了 第一次的 var i=0

此後每次循環不斷覆蓋。當咱們最後在全局真正的 調用的時候：

5.oBtn[0](); // 6

---

三. 閉包引發問題的解決。(精細的原理還請仔細觀看下方)

• 辦法一.現代方法 四兩撥千斤。var 改 let。

  這就是現代的 四兩撥千金。其中的關鍵在於 i 不在三界以內、五行之中，而在 全局裏。

  var oBtn = [];
  for (let i = 0; i < 6; i++) {
    oBtn[i] = function () {
      console.log(i);
    }
  }
  oBtn[0](); // 0

  let的效果 - 咱們只要讓 i 擁有本身的做用域便可。ES6中，使用let以後，可以讓定義的變量在 {} 以內擁有其塊級做用域。

  {
    var a = 10;
    let b = 10;
  }
  console.log(a); // 10;
  console.log(b); // error

  既然知道了現代的解決辦法，也讓咱們回顧一下以往的解決辦法

• 辦法二.用匿名函數來造成本身的局部做用域(目的其實仍是同樣的，將i變爲局部的變量)

  var oBtn = [];
  for (var i = 0; i < 6; i++) {
    (function(index) {
      oBtn[index] = function () {
        console.log(index);
      }
    })(i);
  }
  oBtn[0](); // 0
  oBtn[5](); // 5

• 辦法三.經過新建一個變量保存當前狀態的 i

  (相似與咱們的拍照，隨着時間的變遷，咱們慢慢長大，但我卻能夠用相片記錄下曾經的那個我)

  var oBtn = [];
  for (var i = 0; i < 6; i++) {
    oBtn[i] = {};
    oBtn[i].index = i;
    oBtn[i].func = function() {
      console.log(this.index);
    }
  }
  oBtn[3].func();

  代碼變多了是否是？

至此、閉包帶來的問題解決了。出問題的緣由的關鍵緣由其實仍是 做用域的鍋。另外，閉包自己不是問題，是特性。然使用不當則出現問題，從而被衆人關注。

---

四. 讓咱們回到對閉包的剖析上來。

A.爲何全局裏獲取不到函數的局部變量呢？

JS採用一種垃圾清除的機制，分別用 引用計數 和 標記清除。

• 1.引用計數的原則是當使用了變量，則給變量記爲 1。當你們都不使用了，就像那個被忘掉的人同樣，就被清除了。
• 2.標記清除則是 當變量進入環境則所有變量標記一遍；而後去掉環境中要使用的變量的標記；最後，垃圾收集器完成內存清除工做，銷燬那些還帶有標記的（便是沒被環境中使用的）。

閉包實現了一種特殊的狀況。閉包中的變量，這個函數的空間將會一直在內存中保留。

function test() {
  var a = 3;
  return function() {
    return a;
  }
}
b = test();

雖然在外部無法輸出a，這是由於無法訪問，但a仍是存在於內存之中。由於內部的函數引用了外部的變量a(引用計數法垃圾清除，爲0則刪除)，因此a還被人惦記着，天然也不會消亡(只要b還在，js還在運行)

局部變量做爲函數環境內的變量，當函數運行結束，它就被銷燬了，從而在全局中是找不到它的。而閉包經過對其引用，讓其不被消亡，從而使其可以在全局中生存。

B.函數是怎麼查找變量的呢？爲何 內部函數 找到了 外部函數的 變量？而且將其帶回並保留在了 全局 的世界裏。

• 函數中識別變量，是一層層向外找的。
• 首先在函數內部找，看看是否是內部聲明的，而後再到上一層找，沒找到，再往上，直到全局做用域。

• 若是全局頁面都沒聲明，那瀏覽器就報錯了。

  這一層層中的層是什麼東西呢，就是函數，由於函數提供最小的做用域.

內部函數發現自身沒有找到那個變量。因而往外找，找到了外部函數的變量。將其返回則實現了 內部函數對外部函數的變量的引用，也就是閉包自己的定義。

五. 它可以用來作什麼呢？又帶了哪些後果呢？

萬物都有優勢和缺點。由於咱們是人，糾結又迷茫，自卑而不敢確信。不惟一的想法帶來的後果就是一切皆有可能，一切皆有兩面性。
全部的結果其實都是由於人意識的存在。

---

閉包的優勢

• A. 全局變量可能會形成命名衝突。使用閉包則不用擔憂這個問題。它是私有化的，增強了封裝性。
• B. 變相地實現了數據的私有。跟C++的私有變量類似。
• C. 緩存。
• D. 減小了函數的 參數量(實際現象)。

每一個模塊相互調用。當程序愈來愈複雜，全局變量可能帶來不可預測的危險。
閉包讓局部變量發揮出了全局變量的做用，下降了風險。

---

閉包的缺點

• A. 內存消耗。因爲閉包攜帶了包含它函數的做用域，因此比其餘的函數佔用內存佔用的更多。

---

參考+很是好的一篇文章：http://www.360doc.com/content/15/1008/17/19812575_504201072.shtml

---

complete.