乾貨分享：讓你分分鐘學會javascript閉包_javascript技巧

閉包，是javascript 中重要的一個概念，對於初學者來講，閉包是一個特別抽象的概念，特別是ECMA規範給的定義，如果沒有實戰經驗，你很難從定義去理解它。因此，本文不會對閉包的概念做大篇幅描述，直接上乾貨，讓你分分鐘學會閉包！

1、閉包--愛的初體驗

在接觸一個新技術的時候，我首先會做的一件事就是：找它的demo code。對碼農們來說，程式碼有時候比自然語言更能理解一個事物。 其實，閉包無所不在，例如：jQuery、zepto的主要程式碼都包含在一個大的閉包中，所以下面我先寫一個最簡單、最原始的閉包demo，好讓你在大腦裡產生閉包的畫面：

function A(){
  function B(){
    console.log("Hello Closure!");
  }
  return B;
}
var c = A();
c();//Hello Closure!

這是史上最簡單的閉包，不能再簡單了，再簡單就不是閉包了！

有了初步的認識後，我們簡單分析一下它和普通函數有什麼不同，這樣我們才能從「茫茫人海」中一眼認出「她」。

上面程式碼翻譯成自然語言如下：

• (1)定義了一個普通函數A
• (2)在A中定義了普通函數B
• (3)在A中返回B（確切的講，在A中返回B的引用）
• (4)執行A(),把A的回傳結果賦值給變數 c
• (5)執行 c()

把這5步驟操作總結成一句扯淡的話就是：

函數A的內部函數B被函數A外的一個變數 c 引用

把這句扯淡的話再加工一下就變成了閉包的定義：

當一個內部函數被其外部函數之外的變數引用時，就形成了一個閉包。

不要刻意去記住這個定義，我告訴你這個定義的目的是想讓你理解上面的5步驟操作就是在闡述閉包的定義。

因此，當你執行了上述5步驟操作的時候，你就已經定義了一個閉包！

這就是閉包。

2、閉包的作用

在了解閉包的作用之前，我們先了解一下javascript中的GC機制:在javascript中，如果一個物件不再被引用，那麼這個物件就會被GC回收，否則這個物件一直會保存在內存中。

在上述例子中，B定義在A中，因此B依賴A,而外部變數c 又引用了B, 所以A間接的被c 引用，也就是說，A不會被GC回收，會一直保存在記憶體中。為了證明我們的推理，上面的例子稍作改進：

function A(){
  var count = 0;
  function B(){
    count ++;
    console.log(count);
  }
  return B;
}
var c = A();
c();// 1
c();// 2
c();// 3

count是A中的一個變量，它的值在B中被改變，函數B每執行一次，count的值就在原來的基礎上累加1。因此，A中的count一直保存在記憶體中。

這就是閉包的作用，有時候我們需要一個模組中定義這樣一個變數：希望這個變數一直保存在記憶體中但又不會「污染」全域的變量，這個時候，我們就可以用閉包來定義這個模組。

3、高階寫法

上面的寫法其實是最簡單、最原始的寫法，而在實際應用中，沒人這麼玩，特別是在一些大型JS框架中更不會這麼寫。我之所以還要告訴你這種寫法，是因為幹擾因素越少越容易專注於一件事。下面我用常用的寫法來寫一個簡單的demo元件：

(function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
})(document);

這個元件的作用是：初始化一個容器，然後可以為這個容器添加子容器，也可以移除一個容器。功能很簡單，但這裡涉及了另一個概念：立即執行函數。 簡單了解就行。主要是要理解這種寫法是怎麼實現閉包功能的。

可以將上面的程式碼結構分成兩部分：(function(){})()  紅色部分是一個表達式，而這個表達式本身是一個匿名函數，所以在這個表達式後面加()就表示執行這個匿名函數。

因此這段程式碼執行執行程序可以分解如下：

var f = function(document){
  var viewport;
  var obj = {
    init:function(id){
      viewport = document.querySelector("#"+id);
    },
    addChild:function(child){
      viewport.appendChild(child);
    },
    removeChild:function(child){
      viewport.removeChild(child);
    }
  }
  window.jView = obj;
};
f(document);

It seems that we can see the shadow of closure in this code, but there is no return value in f. It seems that it does not meet the conditions of closure. Pay attention to this code:

window.jView = obj;
obj is an object defined in f, and a series of methods are defined in this object. Executing window.jView = obj means defining a variable jView in the window global object, and pointing this variable to the obj object, that is, the global variable jView references obj. The function in the obj object refers to the variable viewport in f, so the viewport in f will not be recycled by GC and will be saved in memory, so this writing method satisfies the conditions of closure.

4. Simple summary

This is the simplest understanding of closures. Of course, closures have a deeper understanding, which is much more involved. You need to understand the JS execution context (execution context), active object (call object) and The operating mechanism of scope and scope chain. But as a beginner, you don’t need to understand these for now. After you have a simple understanding, you must use it in actual projects. When you use it more, you will naturally have a deeper understanding of closures!

The above is the entire content of this article, I hope it will be helpful to everyone’s study.