帶着疑問來理解JavaScript閉包是如此簡單

前言

在JavaScript中，閉包對於JavaScript的意義無異於指針在c++中的意義。理解閉包是咱們掌握JavaScript這門語言的基礎能力，而對閉包的掌握程度就能夠看出來你對JavaScript這門語言的深刻程度，網上關於閉包的文章也很多但多數讓人看過以後一頭霧水，也許是本身理解能力較差。因此我還下定決心以提問的方式來理解何謂閉包，但願能給與我有相同境遇的博友一點幫助。

閉包是什麼

1. 基本概念（一句話來表述：當B執行時，若是訪問了A中變量對象中的值，那麼閉包就會產生）
   • 閉包是指有權訪問另外一個函數做用域中的變量和函數，即B函數爲閉包函數。
2. 特徵：
   • 函數嵌套函數。
   • 函數內部能夠引用外部的參數和變量。
   • 參數和變量不會被垃圾回收機制回收。

關於閉包的疑問

1. 爲何函數內部能夠引用外部的參數和變量？

• javascript中做用域鏈決定的變量的引用。（做用域鏈是由一系列變量對象組成，咱們能夠在這個單向通道中，查詢變量對象中的標識符，這樣就能夠訪問到上一層做用域中的變量了。）

2. 爲何參數和變量不會被垃圾回收機制回收？

• 在JavaScript的做用域的規則是根據標識符名稱進行變量查找。
• 函數在調用激活時，會開始建立對應的執行上下文，在執行上下文生成的過程當中將肯定變量調用的做用域鏈。
• 正常來講函數執行完後，其對應使用的內存會被JavaScript的垃圾回收機制自動回收（如何回收不在此解釋，簡單來講就是變量不在被引用則會被自動回收），可是閉包不會如此請看以下代碼。

var a = 20;
function clour(c) {
    var b = a + c;
    function innerTest() {
        return b + c;
    }
    return innerTest();
}

var result =clour();//全局變量result不會被回收，而且innerTest被其引用也不會被回收
複製代碼

以上就是爲什麼閉包是能保存變量不被回收。由於閉包內部的變量被一直引用着，JavaScript的垃圾回收機制決定了這種狀況不會被回收的。

項目中閉包常見的運用

1. 最多見的應用-模塊化

;(function(global, factory) {
    factory(global);
}(typeof window !== "undefined" ? window : this, function(window, noGlobal) {
    
    var jQuery = function( selector, context ) {
        return new jQuery.fn.init( selector, context );
    };
    jQuery.fn = jQuery.prototype = {};
    //......
    if ( typeof noGlobal === strundefined ) {
        window.jQuery = window.$ = jQuery;
    }

    return jQuery;
})); 
複製代碼

看到這段代碼你們是否是覺的很熟悉，相信只要是前端都用過他jquery，可是有幾人仔細研究過jquery的源碼呢（反正我沒有=-=）。細節咱們就很少說了，這種總體架構咱們瞅瞅就曉得用了閉包。這也是前端模塊化很是成功的一個實例，雖然如今已經漸漸退出前端界，可是如今比較火的vue（reactjs源碼沒看過不肯定是否也使用了這種結構）中，模塊化很常見。

2. 最多見的應用-定時器

setTimeout(function(){
    console.log('this is time out')
},1000)
複製代碼

3. 最多見的應用-柯里化傳送門

// 正常函數
function normal(a, b) {
    return x + y
}

// 柯里化函數
function curry(x) {
    return function (y) {
        return x + y
    }
}

normal(2, 2)           // 4
curry(21)(2)   // 4
複製代碼

函數能夠做爲參數進行傳遞，而且將函數做爲返回值return出去。

總結

道可道很是道。名可名很是名。在javascript語言世界中有許多特性須要咱們本身去理解，別人告訴你的是他們站在本身的角度思考得出的結論，這點咱們只能做爲參考來看，這也是我爲什麼要寫這篇文章，不僅是爲了給別人分享下本身對JavaScript閉包的理解也是本身對閉包這塊的一個總結吧，若有不正之處請文明指正。

注：本文參考的文檔前端基礎進階（四）：詳細圖解做用域鏈與閉包做者前端基礎進階系列文章通俗易懂值得一讀。