閉包的定義

當一個函數(shù)即便在離開了它的詞法作用域(Lexical Scope)的情況下劫狠，仍然存儲并可以存取它的詞法作用域(Lexical Scope)，這個函數(shù)就構(gòu)成了閉包。由定義我們不難發(fā)現(xiàn)閉包和作用域有很多聯(lián)系

閉包的作用

• 實現(xiàn)變量的“緩存”(使用不好容易出現(xiàn)內(nèi)存泄漏)甲脏。
• 單列模式
• 代碼模塊化
• 。。剃幌。聋涨。晾浴。

閉包的表現(xiàn)

• 閉包是一個函數(shù)负乡。
• 嵌套在另一個函數(shù)里面，并且調(diào)用其變量脊凰。
• 被調(diào)用參數(shù)和變量不會被垃圾回收機制回收

function outer() {
    var local_var = "I'm local"; //不會被立刻回收
    return function inner() { //閉包函數(shù)
        console.log("local: " + local_var);
    }; 
}

閉包的實例講解(最全面)

1. 變量跨域訪問的問題

var global_var = "I'm global";
function A() {
   var local_var = "I'm local";
   console.log("global: " + global_var)
}
console.log("local: " + local_var); 

這就是上面所提到的js作用域問題了抖棘，函數(shù)內(nèi)形成自己的作用塊級作用域，可以訪問全局變量狸涌。反之卻不行切省，全局作用域內(nèi)，卻不能訪問塊級作用域的變量帕胆。但如果我們想訪問到呢朝捆，第一種方式當然就是設(shè)置為全局變量，第二種就是用閉包了,下面看第二種解決方案懒豹。

function outer() {
    var local_var = "I'm local"; //不會被立刻回收
    return function inner() { //閉包函數(shù)
        return local_var;
    }; 
}
var getLocal_var = new outer(); // 當然你也可以直接new outer()();
var local_varValue = getLocal_var();

2. 最常見setTimeout函數(shù)問題

for (var i = 1; i <= 5; i++) {
    setTimeout( function timer(){
        console.log( i );
    }, i*1000 );
}

這個例子相信大家再熟悉不過了芙盘，首先timer（）形成閉包函數(shù)。直覺上都會認為輸出為1脸秽，2儒老，3，4记餐，5驮樊。很明顯這個結(jié)論是錯誤，實際結(jié)果為6片酝，6囚衔，6，6雕沿，6练湿。
首先是js執(zhí)行為單線程，所以當循環(huán)執(zhí)行完之后才會開始執(zhí)行setTimeout函數(shù)晦炊。所以最后執(zhí)行的時候i已經(jīng)變成6了鞠鲜，可能有人會問，每一個閉包不應(yīng)該都會有自己的一份拷貝嗎断国？恭喜你贤姆，你的理解是對的，但這個方法卻沒有這樣做稳衬，它都是調(diào)用了i這個變量霞捡，也就是說沒有保存自己的那一個i。那么問題也就好解決了薄疚，我們給它傳一個屬于自己i碧信。

for (var i=1; i<=5; i++) {
    (function(j){
        setTimeout( function timer(){
            console.log( j );
        }, j*1000 );
    })(i);
}

3. 來看一下阮一峰老師的思考題

　　var name = "The Window";
　　var object = {
　　　　name : "My Object",
　　　　getNameFunc : function(){
　　　　var this_ = this; // 把第二個集合在一起了
　　　　　　return function(){
　　　　　　　　return this.name+'加'+this_.name;
　　　　　　};
　　　　}
　　};
　　alert(object.getNameFunc()());

相信大家已經(jīng)知道答案 this. name = The Window ,this_.name = My Object;,首先我們需要解析的是object.getNameFunc()()到底是怎么運行的呢?

首先 object.getNameFunc = function(){
　　　　var this_ = this;
　　　　　　return function(){
　　　　　　　　return this.name+'加'+this_.name;
　　　　　　};
　　　　}
其次 object.getNameFunc() = function(){
　　　　　　　　return this.name+'加'+this_.name;
　　　　　　};

而最后的object.getNameFunc()()相信大家已經(jīng)知道它執(zhí)行的是哪一個函數(shù)了赊琳。這邊還會涉及到一個this指向的問題。永遠指向調(diào)用它的函數(shù)砰碴，如果沒有就指向window躏筏。所以this_ 指向了object 對象 。而 this 沒有指向任何對象呈枉，所以指向了window趁尼，這也就是答案的由來。

4. 比較復(fù)雜的面試題

function fun(n,o) { // 第一個fun
 console.log(o)
 return {
  fun:function(m){ // 第二個fun
   return fun(m,n); // 還是第一個 fun
   }
 };
}
var a = fun(0); a.fun(1); a.fun(2); a.fun(3);//undefined,?,?,?
var b = fun(0).fun(1).fun(2).fun(3);//undefined,?,?,?
var c = fun(0).fun(1); c.fun(2); c.fun(3);//undefined,?,?,?

可能很多人知道答案猖辫，卻不是很理解酥泞，仔細看下面的分析，主要我們需要認清fun指向的是哪一個啃憎，最終執(zhí)行的函數(shù)是什么
1: fun(0) 最后返回的是什么,作用是什么芝囤？

   a = {
       fun:function(m){ // 這是返回
         return fun(m,n); 
    }
   }

而作用就是將n置為了0，可能有人會問辛萍，執(zhí)行完不應(yīng)會被回收嗎悯姊？當然不是這樣，這個n = 0這個參數(shù)被下面的函數(shù)所引用叹阔，所以不會被垃圾回收機制銷毀挠轴，這就是閉包的作用之一。
a.fun(1) = fun(0).fun(1);
a.fun(2) = fun(0).fun(2);
實際上就是在執(zhí)行 fun(1,n) fun(2,n) fun(3,n) 當然是有返回值的耳幢，我們這邊不討論岸晦，又因為n被賦值為0，所以其實就是在執(zhí)行 fun(1,0) fun(2,0) fun(3,0) 這樣相信大家都知道打印為0 0 0了吧

• 2：fun(0).fun(1)相信大家都知道為0睛藻，但是我們還需要關(guān)注一下這個結(jié)果的返回值是什么启上？

  fun(0).fun(1) 最后執(zhí)行的為fun(1,0) {n = 0,o = 0} 所以返回值依然是 {
         fun:function(m){ // 這是返回
         return fun(m,n); 
    } 

所以fun(0).fun(1).fun(2) 就是在執(zhí)行fun(2,1) 打印1 n = 2 ，o = 1,以此類推 fun(0).fun(1).fun(2).fun(3) 打印2

• 3：和第二題一樣店印，fun(0).fun(1) 依次打印 underfined 和0 c.fun(2) = fun(0).fun(1).fun(2)
  根據(jù)第二題的分析為1冈在，c.fun(3) = fun(0).fun(1).fun(3)，這邊不在是2而是1按摘，雖然第二次的n已經(jīng)變成了2包券，但是因為你又重新執(zhí)行了fun(0).fun(1) n重新被賦值為1了，所以最后執(zhí)行的就是fun(3,1),打印1

閉包常見用法

1. 單利模式

var Singleton = (function () {
    var instance;
    function createInstance() {
        return new Object("I am the instance");
    }
    return {
        getInstance: function () {
            if (!instance) {
                instance = createInstance();
            }
            return instance;
        }
    };
})();
function run() {
    var instance1 = Singleton.getInstance();
    var instance2 = Singleton.getInstance();
    console.log("Same instance? " + (instance1 === instance2));  
}

2. 代碼模塊化（閉包模擬私有方法）

function CoolModule() {
    var something = "cool";
    var another = [1, 2, 3];
    function doSomething() {
        console.log( something );
    }

    function doAnother() {
        console.log( another.join( " ! " ) );
    }

    return {
        doSomething: doSomething,
        doAnother: doAnother
    };
}

var foo = CoolModule();
foo.doSomething(); // cool
foo.doAnother(); // 1 ! 2 ! 3

3. 對象與方法關(guān)聯(lián)

body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 12px;
}

#test-h1 {
  font-size: 1.5em;
}

#test-h2 {
  font-size: 1.2em;
}
#test-h3 {
  font-size: 1.2em;
}
可能以前我們需要點擊來改變body字體的大小的方法為
document.getElementById('size-12').onclick =            function(){
            document.body.style.fontSize ='12px';
};
我們常見的做法就是炫贤，響應(yīng)事件然后執(zhí)行的函數(shù)溅固，但如果需要改變大小的樣式有很多，比如12px一個按鈕兰珍，14px一個按鈕侍郭，16px一個按鈕，如果以前的方式來寫就很麻煩，而閉包可以為我們提供便利
function makeSizer(size) {
  return function() {
    document.body.style.fontSize = size + 'px';
  };
}
var size12 = makeSizer(12);
var size14 = makeSizer(14);
var size16 = makeSizer(16);
document.getElementById('size-12').onclick = size12;
document.getElementById('size-14').onclick = size14;
document.getElementById('size-16').onclick = size16;
是不是很簡單呢亮元？

ES6 解決閉包

1. 塊級作用域
2. let 替代 var

了解詳情請閱讀《ECMAScript 6 入門-阮一峰老師》(http://es6.ruanyifeng.com/)

本文參考

• George
• MDN
• 阮一峰的網(wǎng)絡(luò)日志-學(xué)習(xí)閉包