JavaScript閉包實(shí)例詳解
一、充電
1、一切（引用類型）都是對象，對象是屬性的集合。
2、函數(shù)是一種對象，但是函數(shù)卻不像數(shù)組一樣——你可以說數(shù)組是對象的一種，因?yàn)閿?shù)組就像是對象的一個(gè)子集一樣。但是函數(shù)與對象之間，卻不僅僅是一種包含和被包含的關(guān)系，函數(shù)和對象之間的關(guān)系比較復(fù)雜，甚至有一點(diǎn)雞生蛋蛋生雞的邏輯。
function Fn() {this.name = '王福朋';this.year = 1988;}
var fn1 = new Fn();
var obj = { a: 10, b: 20 };等價(jià)于var obj = new Object();
obj.a = 10;obj.b = 20;
var arr = [5, 'x', true];等價(jià)于var arr = new Array();
arr[0] = 5;arr[1] = 'x';arr[2] = true;
對象是函數(shù)創(chuàng)建的，而函數(shù)卻又是一種對象。
3、每個(gè)函數(shù)都有一個(gè)屬性叫做prototype。這個(gè)prototype的屬性值是一個(gè)對象（屬性的集合，再次強(qiáng)調(diào)?。?，默認(rèn)的只有一個(gè)叫做constructor的屬性，指向這個(gè)函數(shù)本身。
4、每個(gè)對象都有一個(gè)__proto__屬性，指向創(chuàng)建該對象的函數(shù)的prototype。這個(gè)__proto__是一個(gè)隱藏的屬性，JavaScript不希望開發(fā)者用到這個(gè)屬性值，有的低版本瀏覽器甚至不支持這個(gè)屬性值。obj.__proto__=== Object.prototype
二、閉包
1、閉包的基本概念
有權(quán)訪問另一個(gè)函數(shù)作用域中的變量的函數(shù)。簡單理解為“定義在一個(gè)函數(shù)內(nèi)部的函數(shù)”例如：
function createComparisonFunction(propertyName){
return function(object1,object2){//匿名函數(shù)
value1=object1[propertyName];
value2=object2[propertyName];
if(value1<value2){
return -1;
}else if(value1>value2){
return 1;
}else{
return 0;
}
}
}
//創(chuàng)建函數(shù)
var compareNames=createComparisonFunction("name");
//調(diào)用函數(shù)
var result=compareNames({name:"Nicolas"},{name:"Greg"});
//解除對匿名函數(shù)的引用（以便釋放內(nèi)存）
compareNames=null;
alert(result);//1
(1).好處：保護(hù)函數(shù)內(nèi)的變量安全,加強(qiáng)了封裝性；在內(nèi)存中維持一個(gè)變量（緩存）；匿名自執(zhí)行函數(shù)；模擬面向?qū)ο缶幊獭?/p>
(2).應(yīng)用場景：使用閉包代替全局變量；函數(shù)外或在其他函數(shù)中訪問某一函數(shù)內(nèi)部的參數(shù)；包裝相關(guān)功能；為節(jié)點(diǎn)循環(huán)綁定click事件，在事件函數(shù)中使用當(dāng)次循環(huán)的值或節(jié)點(diǎn)，而不是最后一次循環(huán)的值或節(jié)點(diǎn)；
(3).缺點(diǎn)：常駐內(nèi)存，會(huì)增大內(nèi)存使用量，使用不當(dāng)很容易造成內(nèi)存泄露，更重要的是，對閉包的使用不當(dāng)會(huì)造成無效內(nèi)存的產(chǎn)生。
只要存在調(diào)用內(nèi)部函數(shù)的可能，JavaScript就需要保留被引用的函數(shù)。而且JavaScript運(yùn)行時(shí)需要跟蹤引用這個(gè)內(nèi)部函數(shù)的所有變量，直到最后一個(gè)變量廢棄，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間。父函數(shù)定義的變量在子函數(shù)的作用域鏈中，子函數(shù)沒有被銷毀，其作用域鏈中所有變量和函數(shù)就會(huì)被維護(hù)，不會(huì)被銷毀。
2、閉包的用途
閉包有兩個(gè)用途，一是方便實(shí)現(xiàn)嵌套的回調(diào)函數(shù)，二是隱藏對象的細(xì)節(jié)。
對于前者，NodeJS的編程風(fēng)格已經(jīng)可以說明問題，后者對于函數(shù)內(nèi)部的局部變量外部是不可見的，但可以提供訪問函數(shù)來訪問和修改相應(yīng)的局部變量，從而實(shí)現(xiàn)OO封裝的意圖。
(1)、簡單的例子
首先從一個(gè)經(jīng)典錯(cuò)誤談起，頁面上有若干個(gè)div， 我們想給它們綁定一個(gè)onclick方法，于是有了下面的代碼
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" src="jquery.js"></script>
<script>
$(document).ready(function() {
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
alert(i);
}
}
});
</script>
<style>
#divTest{
margin-top:30px;
margin-bottom:40px;
}
span{
border-color:#3C0;
border-style:solid;
margin-bottom:5px;
padding:10px 30px 10px 30px;
border-radius:10px
}
</style>
<title>無標(biāo)題文檔</title>
</head>
<body>
<div id="divTest">
<span>0</span> <span>1</span> <span>2</span> <span>3</span>
</div>
</body>
</html>
很簡單的功能可是卻偏偏出錯(cuò)了，每次alert出的值都是4，簡單的修改就好使了
$(document).ready(function() {
var spans = $("#divTest span");
for (var i = 0; i < spans.length; i++) {
(function(num){//匿名函數(shù)表達(dá)式
spans[i].onclick = function() {
alert(num);
}
})(i);//立即執(zhí)行，并且把i的值傳給num
}
});
上面代碼在頁面加載后就會(huì)執(zhí)行，當(dāng)i的值為4的時(shí)候，判斷條件不成立，for循環(huán)執(zhí)行完畢，但是因?yàn)槊總€(gè)span的onclick方法這時(shí)候?yàn)閮?nèi)部函數(shù)，所以i被閉包引用，內(nèi)存不能被銷毀，i的值會(huì)一直保持4，直到程序改變它或者所有的onclick函數(shù)銷毀（主動(dòng)把函數(shù)賦為null或者頁面卸載）時(shí)才會(huì)被回收。這樣每次我們點(diǎn)擊span的時(shí)候，onclick函數(shù)會(huì)查找i的值（作用域鏈?zhǔn)且梅绞剑?，一查等?，然后就alert給我們了。而第二種方式是使用了一個(gè)立即執(zhí)行的函數(shù)又創(chuàng)建了一層閉包，函數(shù)聲明放在括號(hào)內(nèi)就變成了表達(dá)式，后面再加上括號(hào)括號(hào)就是調(diào)用了，這時(shí)候把i當(dāng)參數(shù)傳入，函數(shù)立即執(zhí)行，num保存每次i的值。
（2）、內(nèi)部函數(shù)
讓我們從一些基礎(chǔ)的知識(shí)談起,首先了解一下內(nèi)部函數(shù)。內(nèi)部函數(shù)就是定義在另一個(gè)函數(shù)中的函數(shù)。例如：
function outerFn () {
function innerFn () {}
}
innerFn就是一個(gè)被包在outerFn作用域中的內(nèi)部函數(shù)。這意味著，在outerFn內(nèi)部調(diào)用innerFn是有效的，而在outerFn外部調(diào)用innerFn則是無效的。下面代碼會(huì)導(dǎo)致一個(gè)JavaScript錯(cuò)誤：
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
}
innerFn();
不過在outerFn內(nèi)部調(diào)用innerFn，則可以成功運(yùn)行：
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
innerFn();
}
outerFn();
（3）、偉大的逃脫
JavaScript允許開發(fā)人員像傳遞任何類型的數(shù)據(jù)一樣傳遞函數(shù)，也就是說，JavaScript中的內(nèi)部函數(shù)能夠逃脫定義他們的外部函數(shù)。
逃脫的方式有很多種，例如可以將內(nèi)部函數(shù)指定給一個(gè)全局變量：
var globalVar;
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
globalVar = innerFn;
}
outerFn();
globalVar();
調(diào)用outerFn時(shí)會(huì)修改全局變量globalVar，這時(shí)候它的引用變?yōu)閕nnerFn，此后調(diào)用globalVar和調(diào)用innerFn一樣。這時(shí)在outerFn外部直接調(diào)用innerFn仍然會(huì)導(dǎo)致錯(cuò)誤，這是因?yàn)閮?nèi)部函數(shù)雖然通過把引用保存在全局變量中實(shí)現(xiàn)了逃脫，但這個(gè)函數(shù)的名字依然只存在于outerFn的作用域中。
也可以通過在父函數(shù)的返回值來獲得內(nèi)部函數(shù)引用
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
document.write("Inner function<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
這里并沒有在outerFn內(nèi)部修改全局變量，而是從outerFn中返回了一個(gè)對innerFn的引用。通過調(diào)用outerFn能夠獲得這個(gè)引用，而且這個(gè)引用可以可以保存在變量中。
這種即使離開函數(shù)作用域的情況下仍然能夠通過引用調(diào)用內(nèi)部函數(shù)的事實(shí)，意味著只要存在調(diào)用內(nèi)部函數(shù)的可能，JavaScript就需要保留被引用的函數(shù)。而且JavaScript運(yùn)行時(shí)需要跟蹤引用這個(gè)內(nèi)部函數(shù)的所有變量，直到最后一個(gè)變量廢棄，JavaScript的垃圾收集器才能釋放相應(yīng)的內(nèi)存空間。
說了半天總算和閉包有關(guān)系了，閉包是指有權(quán)限訪問另一個(gè)函數(shù)作用域的變量的函數(shù)，創(chuàng)建閉包的常見方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)，就是我們上面說的內(nèi)部函數(shù)，所以剛才說的不是廢話，也是閉包相關(guān)的。
（4）、變量的作用域
內(nèi)部函數(shù)也可以有自己的變量，這些變量都被限制在內(nèi)部函數(shù)的作用域中：
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
var innerVar = 0;
innerVar++;
document.write("Inner function\t");
document.write("innerVar = "+innerVar+"<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();
每當(dāng)通過引用或其它方式調(diào)用這個(gè)內(nèi)部函數(shù)時(shí)，就會(huì)創(chuàng)建一個(gè)新的innerVar變量，然后加1，最后顯示
Outer function Inner function innerVar = 1 Inner function innerVar = 1 Outer function Inner function innerVar = 1 Inner function innerVar = 1
內(nèi)部函數(shù)也可以像其他函數(shù)一樣引用全局變量：
var globalVar = 0;
function outerFn() {
document.write("Outer function<br/>");
function innerFn() {
globalVar++;
document.write("Inner function\t");
document.write("globalVar = " + globalVar + "<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();
現(xiàn)在每次調(diào)用內(nèi)部函數(shù)都會(huì)持續(xù)地遞增這個(gè)全局變量的值：
Outer function Inner function globalVar = 1 Inner function globalVar = 2 Outer function Inner function globalVar = 3 Inner function globalVar = 4
但是如果這個(gè)變量是父函數(shù)的局部變量又會(huì)怎樣呢？因?yàn)閮?nèi)部函數(shù)會(huì)引用到父函數(shù)的作用域（有興趣可以了解一下作用域鏈和活動(dòng)對象的知識(shí)），內(nèi)部函數(shù)也可以引用到這些變量
function outerFn() {
var outerVar = 0;
document.write("Outer function<br/>");
function innerFn() {
outerVar++;
document.write("Inner function\t");
document.write("outerVar = " + outerVar + "<br/>");
}
return innerFn;
}
var fnRef = outerFn();
fnRef();
fnRef();
var fnRef2 = outerFn();
fnRef2();
fnRef2();
這一次結(jié)果非常有意思，也許或出乎我們的意料
Outer function Inner function outerVar = 1 Inner function outerVar = 2 Outer function Inner function outerVar = 1 Inner function outerVar = 2
我們看到的是前面兩種情況合成的效果，通過每個(gè)引用調(diào)用innerFn都會(huì)獨(dú)立的遞增outerVar。也就是說第二次調(diào)用outerFn沒有繼續(xù)沿用outerVar的值，而是在第二次函數(shù)調(diào)用的作用域創(chuàng)建并綁定了一個(gè)一個(gè)新的outerVar實(shí)例，兩個(gè)計(jì)數(shù)器完全無關(guān)。
當(dāng)內(nèi)部函數(shù)在定義它的作用域的外部被引用時(shí)，就創(chuàng)建了該內(nèi)部函數(shù)的一個(gè)閉包。這種情況下我們稱既不是內(nèi)部函數(shù)局部變量，也不是其參數(shù)的變量為自由變量，稱外部函數(shù)的調(diào)用環(huán)境為封閉閉包的環(huán)境。從本質(zhì)上講，如果內(nèi)部函數(shù)引用了位于外部函數(shù)中的變量，相當(dāng)于授權(quán)該變量能夠被延遲使用。因此，當(dāng)外部函數(shù)調(diào)用完成后，這些變量的內(nèi)存不會(huì)被釋放（最后的值會(huì)保存），閉包仍然需要使用它們。
（5）、閉包之間的交互
當(dāng)存在多個(gè)內(nèi)部函數(shù)時(shí)，很可能出現(xiàn)意料之外的閉包。我們定義一個(gè)遞增函數(shù)，這個(gè)函數(shù)的增量為2
function outerFn() {
var outerVar = 0;
document.write("Outer function<br/>");
function innerFn1() {
outerVar++;
document.write("Inner function 1\t");
document.write("outerVar = " + outerVar + "<br/>");
}
function innerFn2() {
outerVar += 2;
document.write("Inner function 2\t");
document.write("outerVar = " + outerVar + "<br/>");
}
return { "fn1": innerFn1, "fn2": innerFn2 };
}
var fnRef = outerFn();
fnRef.fn1();
fnRef.fn2();
fnRef.fn1();
var fnRef2 = outerFn();
fnRef2.fn1();
fnRef2.fn2();
fnRef2.fn1();
我們映射返回兩個(gè)內(nèi)部函數(shù)的引用，可以通過返回的引用調(diào)用任一個(gè)內(nèi)部函數(shù)，結(jié)果：
Outer function Inner function 1 outerVar = 1 Inner function 2 outerVar = 3 Inner function 1 outerVar = 4 Outer function Inner function 1 outerVar = 1 Inner function 2 outerVar = 3 Inner function 1 outerVar = 4
innerFn1和innerFn2引用了同一個(gè)局部變量，因此他們共享一個(gè)封閉環(huán)境。當(dāng)innerFn1為outerVar遞增一時(shí)，久違innerFn2設(shè)置了outerVar的新的起點(diǎn)值，反之亦然。我們也看到對outerFn的后續(xù)調(diào)用還會(huì)創(chuàng)建這些閉包的新實(shí)例，同時(shí)也會(huì)創(chuàng)建新的封閉環(huán)境，本質(zhì)上是創(chuàng)建了一個(gè)新對象，自由變量就是這個(gè)對象的實(shí)例變量，而閉包就是這個(gè)對象的實(shí)例方法，而且這些變量也是私有的，因?yàn)椴荒茉诜庋b它們的作用域外部直接引用這些變量，從而確保了了面向?qū)ο髷?shù)據(jù)的專有性。
3、模仿塊級(jí)作用域
JavaScript是函數(shù)作用域（function scope），沒有塊級(jí)作用域。無論函數(shù)體內(nèi)的變量在什么地方聲明，對整個(gè)函數(shù)都是可見的，即JavaScript函數(shù)里聲明的所有變量都被提前到函數(shù)體的頂部，只是提前變量聲明，變量的賦值還是保留在原位置。
匿名函數(shù)可以用來模仿塊級(jí)作用域避免變量提前聲明為全局變量，用作塊級(jí)作用域（通常稱為私有作用域）的匿名函數(shù)的語法如下：
(function(){
//這里是塊級(jí)作用域
})();
例如：
function output(count){
(function(){
for(var i=0;i<count;i++){
alert(i);
}
})();
alert(i);
}
output(4);
在匿名函數(shù)中定義的任何變量，都會(huì)在執(zhí)行結(jié)束時(shí)被銷毀。因此，變量i只能在循環(huán)中使用，使用后即被銷毀。
4、私有變量
我們把有權(quán)訪問私有變量和私有函數(shù)的公有方法稱為特權(quán)方法。
（1）、構(gòu)造函數(shù)中定義特權(quán)方法
function Person(name){
//name為私有變量
this.getName=function(){//特權(quán)方法
return name;
};
this.setName=function(value){//特權(quán)方法
name=value
};
}
var person=new Person("zoumiao");
alert(person.getName());
person.setName("zouzou");
alert(person.getName());
var person1=new Person("zou");
alert(person1.getName());//"zou"
alert(person.getName());//"zouzou"
在構(gòu)造函數(shù)中定義特權(quán)方法也有一個(gè)缺點(diǎn)，那就是你必須使用構(gòu)造函數(shù)模式來達(dá)到這個(gè)目的，構(gòu)造函數(shù)模式的缺點(diǎn)就是針對每一個(gè)實(shí)例都會(huì)創(chuàng)建同樣一組新方法，使用靜態(tài)私有變量來實(shí)現(xiàn)特權(quán)方法就可以避免這個(gè)問題。
（2）、靜態(tài)私有變量
通過在私有作用域中定義私有變量或函數(shù)，同樣也可以創(chuàng)建特權(quán)方法，其基本模式如下：
(function(){
var name='';//靜態(tài)的、由所有實(shí)例共享的屬性
Person=function(value){//全局構(gòu)造函數(shù)
name=value;
}
Person.prototype.getName=function(){//公有/特權(quán)方法
return name;
}
Person.prototype.setName=function(value){//公有/特權(quán)方法
name=value;
}
})();
var person=new Person("zoumiao");
alert(person.getName());
person.setName("zouzou");
alert(person.getName());
var person1=new Person("zou");
alert(person1.getName());//"zou"
alert(person.getName());//"zou"
這個(gè)模式與構(gòu)造函數(shù)中定義特權(quán)方法的區(qū)別，就在于私有變量和函數(shù)是由實(shí)例共享的。
相關(guān)文章
javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的實(shí)現(xiàn)代碼
這篇文章主要介紹了javascript禁止訪客復(fù)制網(wǎng)頁內(nèi)容的方法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JS實(shí)現(xiàn)網(wǎng)頁煙花動(dòng)畫效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)網(wǎng)頁煙花動(dòng)畫效果，點(diǎn)擊鼠標(biāo)煙花向四周擴(kuò)散，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
基于JavaScript實(shí)現(xiàn)實(shí)時(shí)在線協(xié)作編輯器
隨著Web技術(shù)的發(fā)展,實(shí)現(xiàn)在線協(xié)作編輯文檔已經(jīng)成為一種常見的需求,本文主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)實(shí)時(shí)在線協(xié)作編輯器,需要的可以參考下2024-01-01
JavaScript之Map和Set_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
這篇文章主要為大家詳細(xì)介紹了JavaScript之Map和Set的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
替代window.event.srcElement效果的可兼容性的函數(shù)
getEvent()方法可模擬window.event效果2009-12-12
JavaScript實(shí)現(xiàn)網(wǎng)頁截圖功能
這篇文章主要介紹了JavaScript實(shí)現(xiàn)網(wǎng)頁截圖功能,本文介紹了2款實(shí)現(xiàn)JavaScript截圖的開源組件,一個(gè)是Canvas2Image,一個(gè)是html2canvas,需要的朋友可以參考下2014-10-10
Wavesurfer.js是一款基于HTML5 canvas和Web Audio的音頻播放器插件，本文主要記錄它及其視覺效果插件Regions插件的使用方法，感興趣的朋友跟隨小編一起看看吧2018-10-10
JavaScript實(shí)現(xiàn)彩虹文字效果的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)彩虹文字效果的方法,涉及javascript操作文字樣式的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
SyntaxHighlighter自動(dòng)識(shí)別并加載腳本語言
SyntaxHighlighter是一個(gè)使用JavaScript編寫的支持多種編程語言語法高亮的JS插件，很多大型網(wǎng)站或博客都在使用?，F(xiàn)在給大家介紹一下如何讓它自動(dòng)識(shí)別加載我們添加的代碼語言2017-02-02
關(guān)于JavaScript奇怪又實(shí)用的六個(gè)姿勢
這篇文章主要給大家介紹了關(guān)于JavaScript奇怪又實(shí)用的六個(gè)姿勢,這些技巧和建議是我平常在開發(fā)項(xiàng)目上會(huì)用到的,希望能讓大家學(xué)到知識(shí),需要的朋友可以參考下2021-10-10