為啥js中有閉包這個(gè)東西，其他后臺(tái)語(yǔ)言里沒(méi)有？
當(dāng)一個(gè)函數(shù)調(diào)用時(shí)，內(nèi)部變量的查找會(huì)按作用域鏈條來(lái)查找，按理說(shuō)不會(huì)有啥特殊情況出現(xiàn)，js之所以會(huì)出現(xiàn)閉包這個(gè)現(xiàn)象，原因就是你調(diào)用的這個(gè)函數(shù)是另外一個(gè)函數(shù)的返回值。
說(shuō)到函數(shù)能作為返回值，這是跟js中函數(shù)類型是第一類對(duì)象這種語(yǔ)言設(shè)計(jì)方式有關(guān)，我會(huì)先介紹第一類對(duì)象對(duì)js的編碼風(fēng)格的影響。當(dāng)然你直接可以看第二部分，關(guān)于閉包的說(shuō)明。
第一部分
啥是第一類對(duì)象呢，我?guī)湍惆俣攘恕?/p>
第一類對(duì)象不一定是面向?qū)ο蟪绦蛟O(shè)計(jì)所指的物件，而可以指任何程序中的實(shí)體。一般第一類對(duì)象所特有的特性為：
可以被存入變量或其他結(jié)構(gòu)
可以被作為參數(shù)傳遞給其他函數(shù)
可以被作為函數(shù)的返回值
可以在執(zhí)行期創(chuàng)造，而無(wú)需完全在設(shè)計(jì)期全部寫出
即使沒(méi)有被系結(jié)至某一名稱，也可以存在
在js中object類型就是第一類對(duì)象。你能怎么使用object類型。就怎么能使用function類型。
這里先說(shuō)一下js中函數(shù)的四大作用
1.可以調(diào)用執(zhí)行。程序世界里，函數(shù)的基本作用就是可復(fù)用代碼段的封裝，可以直接調(diào)用。
2.可以按照對(duì)象的使用方式來(lái)使用。原因就是js中函數(shù)類型是第一類對(duì)象。準(zhǔn)確的來(lái)說(shuō)js中函數(shù)本身就是對(duì)象。對(duì)象能做啥，他當(dāng)然也能做。
3.可以提供作用域。js中沒(méi)有塊級(jí)作用域的概念。函數(shù)是提供作用域的最小單位。
4.可以作為構(gòu)造函數(shù)。這一作用算是函數(shù)的特殊作用?？梢宰饔蒙善渌麑?duì)象的模板。也就是可以通過(guò)函數(shù)來(lái)模擬類的實(shí)現(xiàn)。
在講閉包之前，先大致對(duì)函數(shù)的使用方式與對(duì)象和數(shù)組（數(shù)組本來(lái)就是對(duì)象，當(dāng)然函數(shù)也是）做個(gè)對(duì)比。
1.關(guān)于字面量
對(duì)象的字面量"{}"
[code]var a = new Object();
a.b = "xxx";
//等同于
var a = {};
a.b = "xxx";
//或者
var a = {
b : "xxx"
};
[/code]數(shù)組的字面量"[]"
[code]var a = new Array('a','b','c');
//等同于
var a = ['a','b','c'];[/code]
那么函數(shù)呢，我們平常聲明函數(shù)的方式，可以理解成是一種字面量（我沒(méi)有說(shuō)是）
[code]function a(x,y){
return x + y;
}
//相當(dāng)于如下對(duì)象的字面量
var a = new Function(x,y,"return x + y;");[/code]
注意：上面所有a 都是對(duì)象的引用
2.關(guān)于匿名函數(shù)
同樣也有匿名對(duì)象和匿名數(shù)組，我們先看看他們是怎么使用的
[code]var b = ({
a : "xxx"
}).a
alert(b) // "xxx"
for(var i = 0; i < [1,2,3].length; i++){
console.log(i);
}[/code]
同樣函數(shù)也有匿名的
[code]funcion(){
alert("11");
}
//因?yàn)楹瘮?shù)的最基本功能是調(diào)用，匿名函數(shù)也可以調(diào)用(我習(xí)慣稱呼為函數(shù)自執(zhí)行，一般書上都叫函數(shù)立即調(diào)用表達(dá)式)
(function(){alert(11)})();[/code]
3.可以存進(jìn)變量或者其他結(jié)構(gòu)。
因?yàn)閿?shù)組元素中可以存入數(shù)組，當(dāng)然也可以存入函數(shù)。對(duì)象也是，鍵值對(duì)的值可以存入任何東西，當(dāng)然也可以存入函數(shù)，這時(shí)我們一般都用匿名函數(shù)，例如
[code]var a = function(){};//這種聲明函數(shù)的方式也叫函數(shù)直接量。
var a = {
say : function(){//....}
};[/code]
4.可以做為參數(shù),傳入函數(shù)也就是平常我們說(shuō)的回調(diào)函數(shù)。
眾所周知函數(shù)有參數(shù)和返回值
對(duì)象和數(shù)組作為參數(shù)沒(méi)得說(shuō)，寫下函數(shù)相關(guān)的例子
[code]var a = function(b){
b();
};
// 可以傳入匿名函數(shù)，jquery中各種回調(diào)都是匿名的
a(function(){alert("123");});
//傳入有名字的函數(shù),跟c聲明的位置無(wú)關(guān)，這里涉及到變量提升的問(wèn)題以及函數(shù)優(yōu)先初始化的問(wèn)題。
a(c);
function c(){
alert("222")
} [/code]
廣義的講，當(dāng)然了，回調(diào)函數(shù)，傳入?yún)?shù)不一定非得函數(shù)變量，但是一定要包含函數(shù)的結(jié)構(gòu)（例如數(shù)組、object對(duì)象、自定義對(duì)象），如下
[code]var a = function(object)
object.say();
}
a({x :"2222",say :function(){alert("xxxx")}});[/code]
5.作為返回值
對(duì)象和數(shù)組作為函數(shù)的返回值沒(méi)得說(shuō)，寫下函數(shù)相關(guān)的例子
[code]function a(){
return function(){
alert("22222");
};
}
(a())();//alert "22222";[/code]
[attachimg][attachimg][attachimg]
第二部分
現(xiàn)在還是說(shuō)說(shuō)為啥出了個(gè)閉包這個(gè)東西，原因[color=Orange]就是你調(diào)用的那個(gè)函數(shù)是另一個(gè)函數(shù)的返回值,當(dāng)外部調(diào)用時(shí)，會(huì)沿著這個(gè)返回值的函數(shù)作用域鏈條來(lái)找其內(nèi)部相關(guān)變量的。[/color]
先大致說(shuō)下作用域鏈條的問(wèn)題。
函數(shù)中識(shí)別變量，是一層層向外找的，首先在函數(shù)內(nèi)部找，看看是不是內(nèi)部聲明的，然后再到上一層找，沒(méi)找到，再往上，直到全局作用域。如果全局頁(yè)面都沒(méi)聲明，那瀏覽器就報(bào)錯(cuò)了。這一層層中的層是什么東西呢，就是函數(shù)，因?yàn)楹瘮?shù)提供最小的作用域?？磦€(gè)例子
[code]var a = 3;
var b = 4;
function outer(){
var a = 5;
var c = 7;
var d = 8;
console.log(a);//5，outer內(nèi)部的
console.log(b);//4，全局的
var inner = function(){
var c = 6;
console.log(b);//4，全局的
console.log(c);//6，inner內(nèi)部的
console.log(d);//8，outer內(nèi)部的
//console.log(e); //報(bào)錯(cuò)，沒(méi)找到
b = 0 //找到全局的
d = "xxx";
}
inner();
console.log(b);//0，找全局的b
console.log(d);//"xxx", outer內(nèi)部的
}
outer();[/code]
作用域鏈條我們明白了，然后咱再來(lái)看看閉包的情形
[code]//代碼1
function a(){
var x = 0;
return function(){
x++；//此函數(shù)的作用域鏈能看到x
console.log(x);
}
}
var fun = a();//a返回的是個(gè)函數(shù)，保存起來(lái)沒(méi)問(wèn)題。
fun()//打印1
fun()//打印2[/code]
為啥打印2而不是1呢，原因是
[color=Orange]因?yàn)閍中返回個(gè)函數(shù)，我們要調(diào)用這個(gè)函數(shù)，瀏覽器一看，你要運(yùn)行的是函數(shù)，函數(shù)是有作用域鏈條的，哦，x我能找到，保證不報(bào)錯(cuò)的。里面的x當(dāng)然也能自增加了[/color]
說(shuō)的直白點(diǎn)就像如下代碼一樣
[code]//代碼2
var x = 0;
var fun = function(){
x++;
console.log(x);
}
fun();//打印1
fun();//打印2[/code]
[color=Orange]補(bǔ)充：[/color]經(jīng)網(wǎng)友提醒，閉包有占用內(nèi)存的問(wèn)題，這里說(shuō)下，因?yàn)榇a1中fun是一個(gè)函數(shù)的引用，瀏覽器對(duì)應(yīng)的會(huì)對(duì)其作用域鏈條中的變量x做了保存，因而會(huì)占用內(nèi)存。達(dá)到的效果就跟代碼2中的x一樣。
要釋放其內(nèi)存可以把其引用置空，使a返回的那個(gè)匿名函數(shù)無(wú)引用指向它，自然垃圾回收器會(huì)回收的。代碼如下
[code]//代碼3
function a(){
var x = 0;
return function(){
x++；//此函數(shù)的作用域鏈能看到x
console.log(x);
}
}
var fun = a();//a返回的是個(gè)函數(shù)，保存起來(lái)沒(méi)問(wèn)題。
fun()//打印1
fun()//打印2
//以后不再使用了，注意要釋放內(nèi)存
fun = null;
[/code]
注意：
[color=Orange]如果我換種調(diào)用方法呢
(a())();//打印1
(a())();//打印1
誒，為啥第二次不打印2了呢。原因很簡(jiǎn)單，因?yàn)閮纱握{(diào)用返回的不是同一個(gè)函數(shù)引用，因此是兩條作用域鏈條。[/color]
說(shuō)的直白點(diǎn)就像如下的代碼
[code]var x1 = 0;
(function(){
x1++;
console.log(x1);
})();//打印1
var x2 = 0;
(function(){
x2++;
console.log(x2);
})();//打印1[/code]
這種使用方式，就不會(huì)有出現(xiàn)閉包常駐內(nèi)存的情況，因?yàn)槊看问褂枚寄涿?，?dāng)然了，也失去了閉包的意義。
大體閉包這種現(xiàn)象我是解釋明白了。我沒(méi)有給閉包下明確的定義，不同的書有不同的說(shuō)法。
有的說(shuō)，返回的那個(gè)函數(shù)是閉包，有的說(shuō)返回的函數(shù)提供的作用域鏈條是閉包。有的甚至把其得到效果說(shuō)是閉包，
大體是這么說(shuō)的，通過(guò)這種方式，能訪問(wèn)某個(gè)部函數(shù)內(nèi)部的私有變量，這種方式稱為閉包。
不管怎么說(shuō)都是跟函數(shù)的作用域鏈條相關(guān)的。更有甚者也有說(shuō)所有函數(shù)都是閉包。
我個(gè)人覺(jué)得會(huì)出現(xiàn)閉包這個(gè)東西，主要原因就是跟js中函數(shù)是第一類對(duì)象有關(guān)，因?yàn)槟阏{(diào)用的一個(gè)函數(shù)可能不是直接聲明的，而是其他函數(shù)直接return的函數(shù)或者return某種結(jié)構(gòu)中的一個(gè)函數(shù)。
關(guān)于是返回某種結(jié)構(gòu)的中函數(shù)，舉例如下
[code]function a(){
var x = 0;
var y = {name :"張三"};
var f1 = function(){
x ++;
}
var f2 = function(name){
y.name = name;
}
return [f1,f2];
}
var b= a()
b[0]();
b0;[/code]
再寫個(gè)
[code]function a(){
var name = null;
var f1 = function(n){
name = n;
};
var f2 = function(){
return name;
};
return {
setName : f1,
getName : f2
}
}
var o =a();
o.setName("老姚");
var myName = o.getName();
console.log(myName);[/code]
如果在講上述例子改寫新的形式，把函數(shù)改成匿名的(有的人甚至覺(jué)得匿名函數(shù)是閉包，那樣我會(huì)說(shuō)，看來(lái)所有函數(shù)都是閉包了)，就是一種設(shè)計(jì)模式：模塊模式。
[code]var person = (function(){
var name = null;
var f1 = function(n){
name = n;
};
var f2 = function(){
return name;
};
return {
setName : f1,
getName : f2
}
}
)();
person.setName("老姚");
console.log(person.getName());[/code]
由此可以看出來(lái)應(yīng)用閉包不只是簡(jiǎn)單的寫個(gè)計(jì)數(shù)器啥的。
第三部分
?下面也是一種閉包的應(yīng)用。
原先是閉包，改后也也是閉包。達(dá)到的效果是，添加一層隔絕，來(lái)滿足我們需要的結(jié)果。
有時(shí)我們本意不想用閉包的，
如下，我想彈出0，1，2的，結(jié)果都會(huì)彈出3.
[code]var fun = function(){
var a = [];
for(var i = 0;i<3;i++){
a.push(function(){
return i;
})
}
//console.log(i);//因?yàn)閖s中沒(méi)有塊級(jí)作用域，i最后變成3,而不是報(bào)錯(cuò)
return a;
}
var a = fun();
alert(a[0]())；//3
alert(a[1]())；//3
alert(a[2]())；//3[/code]
可以改成
[code]var fun = function(){
var a = [];
for(var i = 0;i<3;i++){
a.push(function(j){
return function(){
return j;
};
}(i))
}
return a;
}
var a = fun();
alert(a[0]())//0
alert(a[1]())//1
alert(a[2]())//2[/code]
最開始的那個(gè)例子也可以避免閉包，改成
[code]function a(){
var x = 0;
return function(){
(function(y){//y寫x也沒(méi)問(wèn)題，變量首先會(huì)在此作用找的
y++;
console.log(y);
})(x)
};
}
var fun = a();
fun();//輸出1
fun();//輸出1[/code]
[color=Red]注意：經(jīng)網(wǎng)友指正，原文中的代碼如下，是有問(wèn)題的，原因就是第二個(gè)return，又創(chuàng)建了閉包。代碼敲順手了，還得細(xì)心驗(yàn)證才行。[/color]
此處要改成，“方式二”
[code]function a(){
var x = 0;
return function(x){
return function(){
x++；
console.log(x);
}
}(x);
}[/code]
還有一種情況也會(huì)出現(xiàn)閉包現(xiàn)象，把內(nèi)部函數(shù)綁定了dom節(jié)點(diǎn)某種操作（onclick）的回調(diào)函數(shù)，沒(méi)有寫在return語(yǔ)句里。道理是一樣的。寫在return里，是return后調(diào)用，綁定到dom上，比如說(shuō)觸發(fā)點(diǎn)擊事件后再調(diào)用，其道理是一樣的，作用域鏈條該怎么找就怎么找。
閉包最起碼的應(yīng)用，就是我們可以把一些全局變量封裝起來(lái)，通過(guò)這種方式來(lái)不污染全局，例如上面的模塊模式例子。
最后：
“相信有很多想學(xué)前端的小伙伴，今年年初我花了一個(gè)月整理了一份最適合2018年學(xué)習(xí)的web前端干貨，從最基礎(chǔ)的HTML+CSS+JS到移動(dòng)端HTML5等都有整理，送給每一位前端小伙伴，53763，1707這里是小白聚集地，歡迎初學(xué)和進(jìn)階中的小伙伴?！?/b>
