摘要：該對(duì)象包含了函數(shù)的所有局部變量命名參數(shù)參數(shù)集合以及，然后此對(duì)象會(huì)被推入作用域鏈的前端。如果整個(gè)作用域鏈上都無(wú)法找到，則返回。此時(shí)的作用域鏈包含了兩個(gè)對(duì)象的活動(dòng)對(duì)象和對(duì)象。

前端學(xué)習(xí)：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總

歡迎提issues斧正：閉包

閉包(closure)是一個(gè)讓人又愛又恨的something，它可以實(shí)現(xiàn)很多高級(jí)功能和應(yīng)用，同時(shí)在理解和應(yīng)用上有很多難點(diǎn)和需要小心注意的地方。

閉包，官方對(duì)閉包的解釋是：一個(gè)擁有許多變量和綁定了這些變量的環(huán)境的表達(dá)式（通常是一個(gè)函數(shù)），因而這些變量也是該表達(dá)式的一部分。
簡(jiǎn)單來(lái)說(shuō)，閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在Javascript中，只有函數(shù)內(nèi)部的子函數(shù)才能讀取函數(shù)的局部變量，所以，可以把閉包理解成：定義在一個(gè)函數(shù)內(nèi)部的函數(shù)，也就是函數(shù)嵌套函數(shù)，給函數(shù)內(nèi)部和函數(shù)外部搭建起一座橋梁。

定義在一個(gè)函數(shù)內(nèi)部的函數(shù)。

函數(shù)內(nèi)部可以引用函數(shù)外部的參數(shù)和變量。

作為一個(gè)函數(shù)變量的一個(gè)引用，當(dāng)函數(shù)返回時(shí)，其處于激活狀態(tài)。

當(dāng)一個(gè)函數(shù)返回時(shí)，一個(gè)閉包就是一個(gè)沒(méi)有釋放資源的棧區(qū)。函數(shù)的參數(shù)和變量不會(huì)被垃圾回收機(jī)制回收。

Javascript允許使用內(nèi)部函數(shù)，可以將函數(shù)定義和函數(shù)表達(dá)式放在另一個(gè)函數(shù)的函數(shù)體內(nèi)。而且，內(nèi)部函數(shù)可以訪問(wèn)它所在的外部函數(shù)聲明的局部變量、參數(shù)以及聲明的其他內(nèi)部函數(shù)。當(dāng)其中一個(gè)這樣的內(nèi)部函數(shù)在包含它們的外部函數(shù)之外被調(diào)用時(shí)，就會(huì)形成閉包。

function a() {  
    var i = 0;  
    function b() { 
        console.log(i++); 
    }  
    return b; 
}
var c = a(); 
c();

1.由于閉包會(huì)使得函數(shù)中的變量都被保存在內(nèi)存中，內(nèi)存消耗很大。所以在閉包不用之后，將不使用的局部變量刪除，使其被回收。在IE中可能導(dǎo)致內(nèi)存泄露，即無(wú)法回收駐留在內(nèi)存中的元素，這時(shí)候需要手動(dòng)釋放。

function a() {  
    var i = 1;  
    function b() { 
        console.log(i++); 
    }  
    return b; 
}
var c = a(); 
c(); //1
c(); //2
c(); //3   i不被回收
c = null;  //i被回收

2.閉包會(huì)在父函數(shù)外部，改變父函數(shù)內(nèi)部變量的值。如果你把父函數(shù)當(dāng)作對(duì)象使用，把閉包當(dāng)作它的公用方法，把內(nèi)部變量當(dāng)作它的私有屬性，要小心，不要隨便改變父函數(shù)內(nèi)部變量的值。

var Xzavier = { 
    ten:10,  
    addTen: function(num) {  
       return this.ten + num;   //給一個(gè)數(shù)加10 
   }    
}
 
console.log(Xzavier.addTen(15));  //25
Xzavier.ten = 20; 
console.log(Xzavier.addTen(15));  //35

內(nèi)存泄漏指一塊被分配的內(nèi)存既不能使用，又不能回收，直到瀏覽器進(jìn)程結(jié)束。

出現(xiàn)原因：

1.循環(huán)引用：含有DOM對(duì)象的循環(huán)引用將導(dǎo)致大部分當(dāng)前主流瀏覽器內(nèi)存泄露。循環(huán) 引用，簡(jiǎn)單來(lái)說(shuō)假如a引用了b,b又引用了a,a和b就構(gòu)成了循環(huán)引用。
2.JS閉包：閉包，函數(shù)返回了內(nèi)部函數(shù)還可以繼續(xù)訪問(wèn)外部方法中定義的私有變量。
3.Dom泄露，當(dāng)原有的DOM被移除時(shí)，子結(jié)點(diǎn)引用沒(méi)有被移除則無(wú)法回收。  

Javascript中，如果一個(gè)對(duì)象不再被引用，那么這個(gè)對(duì)象就會(huì)被GC(garbage collection)回收。如果兩個(gè)對(duì)象互相引用，而不再被第3者所引用，那么這兩個(gè)互相引用的對(duì)象也會(huì)被回收。垃圾回收不是時(shí)時(shí)的，因?yàn)槠溟_銷比較大，所以垃圾回收器會(huì)按照固定的時(shí)間間隔周期性的執(zhí)行。

函數(shù)a被b引用，b又被a外的c引用，這就是為什么函數(shù)a執(zhí)行后不會(huì)被回收的原因。

垃圾回收的兩個(gè)方法：

標(biāo)記清除法：

1.垃圾回收機(jī)制給存儲(chǔ)在內(nèi)存中的所有變量加上標(biāo)記，然后去掉環(huán)境中的變量以及被環(huán)境中變量所引用的變量（閉包）。
2.操作1之后內(nèi)存中仍存在標(biāo)記的變量就是要?jiǎng)h除的變量，垃圾回收機(jī)制將這些帶有標(biāo)記的變量回收。

引用計(jì)數(shù)法：

1.垃圾回收機(jī)制給一個(gè)變量一個(gè)引用次數(shù)，當(dāng)聲明了一個(gè)變量并將一個(gè)引用類型賦值給該變量的時(shí)候這個(gè)值的引用次數(shù)就加1。
2.當(dāng)該變量的值變成了另外一個(gè)值，則這個(gè)值得引用次數(shù)減1。
3.當(dāng)這個(gè)值的引用次數(shù)變?yōu)?的時(shí)候，說(shuō)明沒(méi)有變量在使用，垃圾回收機(jī)制會(huì)在運(yùn)行的時(shí)候清理掉引用次數(shù)為0的值占用的空間。

函數(shù)a中i只有函數(shù)b才能訪問(wèn)，而無(wú)法通過(guò)其他途徑訪問(wèn)到。

function xzavier(){
    var i = 1;
    i++;
    console.log(i);
}
xzavier();   //2 
console.log(x);   // x is not defined                 
xzavier();   //2

由于閉包，函數(shù)a中i的一直存在于內(nèi)存中，因此每次執(zhí)行c()，都會(huì)給i自加1，且i不被垃圾回收機(jī)制回收。

function a() {  
    var i = 1;  
    function b() { 
        console.log(i++); 
    }  
    return b; 
}
var c = a(); 
c();  //1
c();  //2
c();  //3

var xzavier = (function(){
    var i = 1;
    var s = "xzavier";
    function f(){
        i++;
        console.log(i);
    }
    return {
        i:i,
        s:s,             
        f:f
    }
})();
xzavier.s;     //"xzavier"
xzavier.s;     //1
xzavier.f()    //2

方法2即使用了閉包的方法，當(dāng)然操作DOM還是有別的方法的，比如事件委托就比較好用。

ul id="test">
    
first
    
second
    
third

// 方法一：this方法
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i = 0;i < 3;i++){
    lis[i].index = i;
    lis[i].onclick = function(){
        console.log(this.index);
    };
} 
// 方法二：閉包方法
var lis = document.getElementById("test").getElementsByTagName("li");
for(var i = 0;i < 3;i++){
    lis[i].index = i;
    lis[i].onclick = (function(val){
        return function() {
            console.log(val);
        }
    })(i);
}
// 方法三 事件委托方法
var oUl = document.getElementById("test");
oUl.addEventListener("click",function(e){
    var lis = e.target;
    console.log(lis); 
});

邏輯隨業(yè)務(wù)復(fù)雜而復(fù)雜O(∩_∩)O~

var Xzavier = function(){       
    var name = "xzavier";       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}();    

console.log(person.name); //undefined，變量作用域?yàn)楹瘮?shù)內(nèi)部，外部無(wú)法訪問(wèn)    
console.log(person.getName()); // "xzavier" 
person.setName("xz");    
console.log(person.getName());  //"xz"

function Xzavier(){       
    var name = "xzavier";       
    return {    
       getName : function(){    
           return name;    
       },    
       setName : function(newName){    
           name = newName;    
       }    
    }    
}

var xz = new Xzavier();  //Xzavier就是一個(gè)類，可以實(shí)例化
console.log(xz.getName());  // "xzavier"  

這里是原型繼承，我會(huì)在下一篇文章講一講原型繼承。

var X = function(){};
X.prototype = new Xzavier(); 
X.prototype.sports = function(){
    console.log("basketball");
};
var x = new X();
x.setName("xz");
x.sports();  //"basketball"
console.log(x.getName());  //"xz"

JavaScript作用域

作用域就是變量與函數(shù)的可訪問(wèn)范圍，即作用域控制著變量與函數(shù)的可見性和生命周期。
在JavaScript中，變量的作用域有全局作用域和局部作用域兩種。

JavaScript作用域鏈

JavaScript函數(shù)對(duì)象擁有可以通過(guò)代碼訪問(wèn)的屬性和一系列僅供JavaScript引擎訪問(wèn)的內(nèi)部屬性。
其中一個(gè)內(nèi)部屬性是[[Scope]]，該內(nèi)部屬性包含了函數(shù)被創(chuàng)建的作用域中對(duì)象的集合。
這個(gè)集合被稱為函數(shù)的作用域鏈。

執(zhí)行上下文

當(dāng)函數(shù)執(zhí)行時(shí)，會(huì)創(chuàng)建一個(gè)執(zhí)行上下文(execution context)，執(zhí)行上下文是一個(gè)內(nèi)部對(duì)象，定義了函數(shù)執(zhí)行時(shí)的環(huán)境。
每個(gè)執(zhí)行上下文都有自己的作用域鏈，用于標(biāo)識(shí)符解析。
當(dāng)執(zhí)行上下文被創(chuàng)建時(shí)，而它的作用域鏈初始化為當(dāng)前運(yùn)行函數(shù)的[[Scope]]包含的對(duì)象。

活動(dòng)對(duì)象

這些值按照它們出現(xiàn)在函數(shù)中的順序被復(fù)制到執(zhí)行上下文的作用域鏈中。
它們共同組成了一個(gè)新的對(duì)象，活動(dòng)對(duì)象(activation object)。
該對(duì)象包含了函數(shù)的所有局部變量、命名參數(shù)、參數(shù)集合以及this，然后此對(duì)象會(huì)被推入作用域鏈的前端。
當(dāng)執(zhí)行上下文被銷毀，活動(dòng)對(duì)象也隨之銷毀。
活動(dòng)對(duì)象是一個(gè)擁有屬性的對(duì)象，但它不具有原型而且不能通過(guò)JavaScript代碼直接訪問(wèn)。

查找機(jī)制:

1.當(dāng)函數(shù)訪問(wèn)一個(gè)變量時(shí)，先搜索自身的活動(dòng)對(duì)象，如果存在則返回，如果不存在將繼續(xù)搜索函數(shù)父函數(shù)的活動(dòng)對(duì)象，依次查找，直到找到為止。
2.如果函數(shù)存在prototype原型對(duì)象，則在查找完自身的活動(dòng)對(duì)象后先查找自身的原型對(duì)象，再繼續(xù)查找。
3.如果整個(gè)作用域鏈上都無(wú)法找到，則返回undefined。

在執(zhí)行上下文的作用域鏈中，標(biāo)識(shí)符所在的位置越深，讀寫速度就會(huì)越慢。全局變量總是存在于執(zhí)行上下文作用域鏈的最末端，因此在標(biāo)識(shí)符解析的時(shí)候，查找全局變量是最慢的。

so

在編寫代碼的時(shí)候應(yīng)盡量少使用全局變量，盡可能使用局部變量。
我們經(jīng)常使用局部變量先保存一個(gè)多次使用的需要跨作用取的值再使用。

function a() {  
    var i = 1;  
    function b() { 
        console.log(i++); 
    }  
    return b; 
}
var c = a(); 
c();

1.當(dāng)定義函數(shù)a，js解釋器將函數(shù)a的作用域鏈設(shè)置為定義a時(shí)a所在的環(huán)境。
2.執(zhí)行函數(shù)a的時(shí)候，a會(huì)進(jìn)入相應(yīng)的執(zhí)行上下文。
3.在創(chuàng)建執(zhí)行上下文的過(guò)程中，首先會(huì)為a添加一個(gè)scope屬性，即a的作用域，其值就為a的作用域鏈。
4.然后執(zhí)行上下文會(huì)創(chuàng)建一個(gè)活動(dòng)對(duì)象。
5.創(chuàng)建完活動(dòng)對(duì)象后，把活動(dòng)對(duì)象添加到a的作用域鏈的最頂端。此時(shí)a的作用域鏈包含了兩個(gè)對(duì)象：a的活動(dòng)對(duì)象和window對(duì)象。
6.接著在活動(dòng)對(duì)象上添加一個(gè)arguments屬性，它保存著調(diào)用函數(shù)a時(shí)所傳遞的參數(shù)。
7.最后把所有函數(shù)a的形參和內(nèi)部的函數(shù)b的引用也添加到a的活動(dòng)對(duì)象上。    
  在這一步中，完成了函數(shù)b的的定義（如同a），函數(shù)b的作用域鏈被設(shè)置為b所被定義的環(huán)境，即a的作用域。
8.整個(gè)函數(shù)a從定義到執(zhí)行的步驟完成。

a返回函數(shù)b的引用給c，因?yàn)楹瘮?shù)b的作用域鏈包含了對(duì)函數(shù)a的活動(dòng)對(duì)象的引用，也就是說(shuō)b可以訪問(wèn)到a中定義的所有變量和函數(shù)。函數(shù)b被c引用，函數(shù)b又依賴函數(shù)a，因此函數(shù)a在返回后不會(huì)被GC回收，所以形成了閉包。