JavaScript高級特性 閉包

1.閉包

看本篇文章時能夠先了解一下前面的一片文章<JavaScript 高級特性 做用域詳解>

閉包是JavaScript的一大謎團，關於這個問題有不少文章進行講述，然而依然有至關數量的程序員對這個概念理解不透徹。閉包的官方定義爲：一個擁有許多變量和綁定了這些變量的環境的表達式（一般是一個函數），於是這些變量也是該表達式的一部分。

一句話歸納就是：閉包就是一個函數，捕獲做用域內的外部綁定。這些綁定是爲以後使用而被綁定，即便做用域已經銷燬。

自由變量

自由變量與閉包的關係是，自由變量閉合於閉包的建立。閉包背後的邏輯是，若是一個函數內部有其餘函數，那麼這些內部函數能夠訪問在這個外部函數中聲明的變量（這些變量就稱之爲自由變量）。然而，這些變量能夠被內部函數捕獲，從高階函數（返回另外一個函數的函數稱爲高階函數）中return語句實現「越獄」，以供之後使用。內部函數在沒有任何局部聲明以前（既不是被傳入，也不是局部聲明）使用的變量就是被捕獲的變量。實例以下：

function makeAdder(captured) {
    return function(free) {
        var ret = free + captured;
        console.log(ret);
    }
}

var add10 = makeAdder(10);

add10(2); // 輸出:12

從上例可知，外部函數中的變量captured被執行加法的返回函數捕獲，內部函數從未聲明過captured變量，卻能夠引用它。

若是咱們再建立一個加法器將捕獲到同名變量captured，但有不一樣的值，由於這個加法器是在調用makeAdder以後被建立：

var add16 = makeAdder(16);
 add16(18); // 輸出:34
 add10(10); // 輸出:20

如上述代碼所示，每個新的加法器函數都保留了本身建立時捕獲的captured實例。

2.變量遮蔽

在JavaScript中，當變量在必定做用域內聲明，而後在另外一個同名變量在一個較低的做用域聲明，會發生變量的遮蔽。實例以下：

var name = "jeri";
var name = "tom";

function glbShadow() {
    var name = "fun";

    console.log(name); // 輸出:fun
}

glbShadow();

console.log(name); // 輸出:tom

當在一個變量同一做用域內聲明瞭屢次時，最後一次聲明會生效，會遮蔽之前的聲明。

變量聲明的遮蔽很好理解，然而函數參數的遮蔽就略顯複雜。例如：

var shadowed = 0;

function argShadow(shadowed) {
    var str = ["Value is",shadowed].join(" ");
    console.log(str);
}

argShadow(108); // output:Value is 108

argShadow(); // output:Value is

函數argShadow的參數shadowed覆蓋了全局做用域內的同名變量。即便沒有傳遞任何參數，仍然綁定的是shadowed，並無訪問到全局變量shadowed = 0

任何狀況下，離得最近的變量綁定優先級最高。實例以下：

var shadowed = 0;

function varShadow(shadowed) {
    var shadowed = 123;
    var str = ["Value is",shadowed].join(" ");
    console.log(str);
}

varShadow(108); // output:Value is 123

varShadow(); // output:Value is 123
//varShadow(108)打印出來的並非108而是123，即便沒有參數傳入也是打印的123，先訪問離得最近的變量綁定。

遮蔽變量一樣發生在閉包內部，實例以下：

function captureShadow(shadowed) {

    console.log(shadowed); // output:108
    
    return function(shadowed) {

        console.log(shadowed); // output:2
        var ret = shadowed + 1;
        console.log(ret); // output:3
    }
}

var closureShadow = captureShadow(108);

closureShadow(2);

在編寫JavaScript代碼時，由於變量遮蔽會使不少變量綁定超出咱們的控制，咱們應儘可能避免變量遮蔽，必定要注意變量命名。

3.典型誤區

下面是一個很是典型的問題，曾經困擾了不少人，下面也來探討下。

var test = function() {
    var ret = [];

    for(var i = 0; i < 5; i++) {
        ret[i] = function() {
            return i;  
        }
    }

    return ret;
};
var test0 = test()[0]();
console.log(test0); // 輸出：5

var test1 = test()[1]();
console.log(test1); //輸出：5

/*
從上面的例子可知，test這個函數執行以後返回一個函數數組，
表面上看數組內的每一個函數都應該返回本身的索引值，然而並非如此。
當外部函數執行完畢後，外部函數雖然其執行環境已經銷燬，
但閉包依然保留着對其中變量綁定的引用，仍然駐留在內存之中。
當外部函數執行完畢以後，纔會執行內部函數，
而這時內部函數捕獲的變量綁定已是外部函數執行以後的最終變量值了，
因此這些函數都引用的是同一個變量i=5。

下面有個更優雅的例子來表述這個問題：
*/

for(var i = 0; i < 5; i++) {

    setTimeout(function() {
        console.log(i);  
    }, 1000);
}

// 每隔1秒輸出一個5
/*按照咱們的推斷，上例應該輸出1,2,3,4,5。
然而，事實上輸出的是連續5個5。
爲何出現這種詭異的情況呢？其本質上仍是由閉包特性形成的，閉包能夠捕獲外部做用域的變量綁定。
上面這個函數片斷在執行時，其內部函數和外部函數並非同步執行的，
由於當調用setTimeout時會有一個延時事件排入隊列，
等全部同步代碼執行完畢後，再依次執行隊列中的延時事件，而這個時候 i 已經 是5了。

那怎麼解決這個問題呢？咱們是否是能夠在每一個循環執行時，
給內部函數傳進一個變量的拷貝，使其在每次建立閉包時，都捕獲一個變量綁定。
由於咱們每次傳參不一樣，那麼每次捕獲的變量綁定也是不一樣的，也就避免了最後輸出5個5的情況。實例以下：*/
for(var i = 0; i < 5; i++) {

    (function(j) {

        setTimeout(function() {
            console.log(j);  
        }, 1000);
    })(i);
}

// 輸出：0,1,2,3,4

閉包具備很是強大的功能，函數內部能夠引用外部的參數和變量，但其參數和變量不會被垃圾回收機制回，常駐內存，會增大內存使用量，使用不當很容易形成內存泄露。但，閉包也是javascript語言的一大特色，主要應用閉包場合爲：設計私有的方法和變量。 

4.模擬私有變量

從上文的敘述咱們知道，變量的捕獲發生在建立閉包的時候，那麼咱們能夠把閉包捕獲到的變量做爲私有變量。實例以下：

var closureDemo = (function() {
    var PRIVATE = 0;

    return {
        inc:function(n) {
            return PRIVATE += n;
        },
        dec:function(n) {
            return PRIVATE -= n;
        }
    };
})();

var testInc = closureDemo.inc(10);
//console.log(testInc);
// 輸出：10

var testDec = closureDemo.dec(7);
//console.log(testDec);
// 輸出：3

closureDemo.div = function(n) {
    return PRIVATE / n;
};

var testDiv = closureDemo.div(3);
console.log(testDiv);
//輸出：Uncaught ReferenceError: PRIVATE is not defined

自執行函數closureDemo執行完畢以後，自執行函數做用域和PRIVATE隨之銷燬，但PRIVATE仍滯留在內存中，也就是加入到closureDemo.inc和closureDemo.dec的做用域鏈中，閉包也就完成了變量的捕獲。但以後新加入的closureDemo.div並不能在做用域中繼續尋找到PRIVATE了。由於，函數只有被調用時纔會執行函數裏面的代碼，變量的捕獲也只發生在建立閉包時，因此以後新加入的div方法並不能捕獲PRIVATE。

5.建立特權方法

經過閉包咱們能夠建立私有做用域，那麼也就能夠建立私有變量和私有函數。建立私有函數的方式和聲明私有變量方法一致，只要在函數內部聲明函數就能夠了。固然，既然能夠模擬私有變量和私有函數，咱們也能夠利用閉包這個特性，建立特權方法。實例以下：

(function() {

    // 私有變量和私有函數
    var privateVar = 10;

    function privateFun() {
        return false;
    };

    // 構造函數
    MyObj = function() {

    };

    // 公有/特權方法
    MyObj.prototype.publicMethod = function() {
        privateVar ++;
        return privateFun();
    }
})();

上面這個實例建立了一個私有做用域，並封裝了一個構造函數和對應的方法。須要注意的是在上面的實例中，在聲明MyObj這個函數時，使用的是不帶var的函數表達式，咱們但願產生的是一個全局函數而不是局部的，否則咱們依然在外部沒法訪問。因此，MyObj就成爲了一個全局變量，可以在外部進行訪問，咱們在原型上定義的方法publicMethod也就可使用，經過這個方法咱們也就能夠訪問私有函數和私有變量了。

總的來講，由於閉包奇特的特性，能夠經過它實現一些強大的功能。但，咱們在平常編程中，也要正確的使用閉包，要時刻注意回收不用的變量，避免內存泄露。

本文詳細探討了閉包的生成機理和一些常見錯誤理解，最後對閉包進行了應用舉例。但限於我的水平有限，但有疏漏之處還望見諒。歡迎交流！

數據冰冷的，但咱們要讓數據溫暖起來，改變咱們的生活！能夠關注個人訂閱號,或者加微信

 

 

 

微信訂閱號

 

 

 

 

 

 

 

 

 

微信號