DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript閉包實例詳解
JavaScript閉包實例詳解
編輯:關於JavaScript     

一、充電

1、一切(引用類型)都是對象,對象是屬性的集合。

2、函數是一種對象,但是函數卻不像數組一樣——你可以說數組是對象的一種,因為數組就像是對象的一個子集一樣。但是函數與對象之間,卻不僅僅是一種包含和被包含的關系,函數和對象之間的關系比較復雜,甚至有一點雞生蛋蛋生雞的邏輯。

function Fn() {this.name = '王福朋';this.year = 1988;}
var fn1 = new Fn();
var obj = { a: 10, b: 20 };等價於var obj = new Object();
obj.a = 10;obj.b = 20;
var arr = [5, 'x', true];等價於var arr = new Array();
arr[0] = 5;arr[1] = 'x';arr[2] = true;

對象是函數創建的,而函數卻又是一種對象。

3、每個函數都有一個屬性叫做prototype。這個prototype的屬性值是一個對象(屬性的集合,再次強調!),默認的只有一個叫做constructor的屬性,指向這個函數本身。

4、每個對象都有一個__proto__屬性,指向創建該對象的函數的prototype。這個__proto__是一個隱藏的屬性,JavaScript不希望開發者用到這個屬性值,有的低版本浏覽器甚至不支持這個屬性值。obj.__proto__=== Object.prototype

二、閉包

1、閉包的基本概念

有權訪問另一個函數作用域中的變量的函數。簡單理解為“定義在一個函數內部的函數”例如:

function createComparisonFunction(propertyName){ 
return function(object1,object2){//匿名函數 
value1=object1[propertyName]; 
value2=object2[propertyName]; 
if(value1<value2){ 
return -1; 
}else if(value1>value2){ 
return 1; 
}else{ 
return 0; 
} 
} 
} 
//創建函數 
var compareNames=createComparisonFunction("name"); 
//調用函數 
var result=compareNames({name:"Nicolas"},{name:"Greg"}); 
//解除對匿名函數的引用(以便釋放內存) 
compareNames=null; 
alert(result);//1 

(1).好處:保護函數內的變量安全,加強了封裝性;在內存中維持一個變量(緩存);匿名自執行函數;模擬面向對象編程。

(2).應用場景:使用閉包代替全局變量;函數外或在其他函數中訪問某一函數內部的參數;包裝相關功能;為節點循環綁定click事件,在事件函數中使用當次循環的值或節點,而不是最後一次循環的值或節點;

(3).缺點:常駐內存,會增大內存使用量,使用不當很容易造成內存洩露,更重要的是,對閉包的使用不當會造成無效內存的產生。

只要存在調用內部函數的可能,JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內部函數的所有變量,直到最後一個變量廢棄,JavaScript的垃圾收集器才能釋放相應的內存空間。父函數定義的變量在子函數的作用域鏈中,子函數沒有被銷毀,其作用域鏈中所有變量和函數就會被維護,不會被銷毀。

2、閉包的用途

閉包有兩個用途,一是方便實現嵌套的回調函數,二是隱藏對象的細節。

對於前者,NodeJS的編程風格已經可以說明問題,後者對於函數內部的局部變量外部是不可見的,但可以提供訪問函數來訪問和修改相應的局部變量,從而實現OO封裝的意圖。

(1)、簡單的例子

首先從一個經典錯誤談起,頁面上有若干個div, 我們想給它們綁定一個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>無標題文檔</title> 
</head> 
<body> 
<div id="divTest"> 
<span>0</span> <span>1</span> <span>2</span> <span>3</span> 
</div> 
</body> 
</html> 

很簡單的功能可是卻偏偏出錯了,每次alert出的值都是4,簡單的修改就好使了

$(document).ready(function() { 
var spans = $("#divTest span"); 
for (var i = 0; i < spans.length; i++) { 
(function(num){//匿名函數表達式 
spans[i].onclick = function() { 
alert(num); 
} 
})(i);//立即執行,並且把i的值傳給num 
} 
});

上面代碼在頁面加載後就會執行,當i的值為4的時候,判斷條件不成立,for循環執行完畢,但是因為每個span的onclick方法這時候為內部函數,所以i被閉包引用,內存不能被銷毀,i的值會一直保持4,直到程序改變它或者所有的onclick函數銷毀(主動把函數賦為null或者頁面卸載)時才會被回收。這樣每次我們點擊span的時候,onclick函數會查找i的值(作用域鏈是引用方式),一查等於4,然後就alert給我們了。而第二種方式是使用了一個立即執行的函數又創建了一層閉包,函數聲明放在括號內就變成了表達式,後面再加上括號括號就是調用了,這時候把i當參數傳入,函數立即執行,num保存每次i的值。

(2)、內部函數

讓我們從一些基礎的知識談起,首先了解一下內部函數。內部函數就是定義在另一個函數中的函數。例如:

function outerFn () { 
function innerFn () {} 
} 

innerFn就是一個被包在outerFn作用域中的內部函數。這意味著,在outerFn內部調用innerFn是有效的,而在outerFn外部調用innerFn則是無效的。下面代碼會導致一個JavaScript錯誤:

function outerFn() { 
document.write("Outer function<br/>"); 
function innerFn() { 
document.write("Inner function<br/>"); 
} 
} 
innerFn(); 

不過在outerFn內部調用innerFn,則可以成功運行:

function outerFn() { 
document.write("Outer function<br/>"); 
function innerFn() { 
document.write("Inner function<br/>"); 
} 
innerFn(); 
} 
outerFn(); 

(3)、偉大的逃脫

JavaScript允許開發人員像傳遞任何類型的數據一樣傳遞函數,也就是說,JavaScript中的內部函數能夠逃脫定義他們的外部函數。

逃脫的方式有很多種,例如可以將內部函數指定給一個全局變量:

var globalVar; 
function outerFn() { 
document.write("Outer function<br/>"); 
function innerFn() { 
document.write("Inner function<br/>"); 
} 
globalVar = innerFn; 
} 
outerFn(); 
globalVar(); 

調用outerFn時會修改全局變量globalVar,這時候它的引用變為innerFn,此後調用globalVar和調用innerFn一樣。這時在outerFn外部直接調用innerFn仍然會導致錯誤,這是因為內部函數雖然通過把引用保存在全局變量中實現了逃脫,但這個函數的名字依然只存在於outerFn的作用域中。
也可以通過在父函數的返回值來獲得內部函數引用

function outerFn() { 
document.write("Outer function<br/>"); 
function innerFn() { 
document.write("Inner function<br/>"); 
} 
return innerFn; 
} 
var fnRef = outerFn(); 
fnRef(); 

這裡並沒有在outerFn內部修改全局變量,而是從outerFn中返回了一個對innerFn的引用。通過調用outerFn能夠獲得這個引用,而且這個引用可以可以保存在變量中。

這種即使離開函數作用域的情況下仍然能夠通過引用調用內部函數的事實,意味著只要存在調用內部函數的可能,JavaScript就需要保留被引用的函數。而且JavaScript運行時需要跟蹤引用這個內部函數的所有變量,直到最後一個變量廢棄,JavaScript的垃圾收集器才能釋放相應的內存空間。

說了半天總算和閉包有關系了,閉包是指有權限訪問另一個函數作用域的變量的函數,創建閉包的常見方式就是在一個函數內部創建另一個函數,就是我們上面說的內部函數,所以剛才說的不是廢話,也是閉包相關的。

(4)、變量的作用域

內部函數也可以有自己的變量,這些變量都被限制在內部函數的作用域中:

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(); 

每當通過引用或其它方式調用這個內部函數時,就會創建一個新的innerVar變量,然後加1,最後顯示

Outer function
Inner function innerVar = 1
Inner function innerVar = 1
Outer function
Inner function innerVar = 1
Inner function innerVar = 1

內部函數也可以像其他函數一樣引用全局變量:

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(); 

現在每次調用內部函數都會持續地遞增這個全局變量的值:

Outer function
Inner function globalVar = 1
Inner function globalVar = 2
Outer function
Inner function globalVar = 3
Inner function globalVar = 4

但是如果這個變量是父函數的局部變量又會怎樣呢?因為內部函數會引用到父函數的作用域(有興趣可以了解一下作用域鏈和活動對象的知識),內部函數也可以引用到這些變量

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(); 

這一次結果非常有意思,也許或出乎我們的意料

Outer function
Inner function outerVar = 1
Inner function outerVar = 2
Outer function
Inner function outerVar = 1
Inner function outerVar = 2

我們看到的是前面兩種情況合成的效果,通過每個引用調用innerFn都會獨立的遞增outerVar。也就是說第二次調用outerFn沒有繼續沿用outerVar的值,而是在第二次函數調用的作用域創建並綁定了一個一個新的outerVar實例,兩個計數器完全無關。

當內部函數在定義它的作用域的外部被引用時,就創建了該內部函數的一個閉包。這種情況下我們稱既不是內部函數局部變量,也不是其參數的變量為自由變量,稱外部函數的調用環境為封閉閉包的環境。從本質上講,如果內部函數引用了位於外部函數中的變量,相當於授權該變量能夠被延遲使用。因此,當外部函數調用完成後,這些變量的內存不會被釋放(最後的值會保存),閉包仍然需要使用它們。

(5)、閉包之間的交互

當存在多個內部函數時,很可能出現意料之外的閉包。我們定義一個遞增函數,這個函數的增量為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(); 

我們映射返回兩個內部函數的引用,可以通過返回的引用調用任一個內部函數,結果:

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引用了同一個局部變量,因此他們共享一個封閉環境。當innerFn1為outerVar遞增一時,久違innerFn2設置了outerVar的新的起點值,反之亦然。我們也看到對outerFn的後續調用還會創建這些閉包的新實例,同時也會創建新的封閉環境,本質上是創建了一個新對象,自由變量就是這個對象的實例變量,而閉包就是這個對象的實例方法,而且這些變量也是私有的,因為不能在封裝它們的作用域外部直接引用這些變量,從而確保了了面向對象數據的專有性。

3、模仿塊級作用域

JavaScript是函數作用域(function scope),沒有塊級作用域。無論函數體內的變量在什麼地方聲明,對整個函數都是可見的,即JavaScript函數裡聲明的所有變量都被提前到函數體的頂部,只是提前變量聲明,變量的賦值還是保留在原位置。

匿名函數可以用來模仿塊級作用域避免變量提前聲明為全局變量,用作塊級作用域(通常稱為私有作用域)的匿名函數的語法如下:

(function(){
//這裡是塊級作用域
})();

例如:

function output(count){ 
(function(){ 
for(var i=0;i<count;i++){ 
alert(i); 
} 
})(); 
alert(i); 
} 
output(4); 

在匿名函數中定義的任何變量,都會在執行結束時被銷毀。因此,變量i只能在循環中使用,使用後即被銷毀。

4、私有變量

我們把有權訪問私有變量和私有函數的公有方法稱為特權方法。

(1)、構造函數中定義特權方法

function Person(name){ 
//name為私有變量 
this.getName=function(){//特權方法 
return name; 
}; 
this.setName=function(value){//特權方法 
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" 

在構造函數中定義特權方法也有一個缺點,那就是你必須使用構造函數模式來達到這個目的,構造函數模式的缺點就是針對每一個實例都會創建同樣一組新方法,使用靜態私有變量來實現特權方法就可以避免這個問題。

(2)、靜態私有變量

通過在私有作用域中定義私有變量或函數,同樣也可以創建特權方法,其基本模式如下:

(function(){ 
var name='';//靜態的、由所有實例共享的屬性 
Person=function(value){//全局構造函數 
name=value; 
} 
Person.prototype.getName=function(){//公有/特權方法 
return name; 
} 
Person.prototype.setName=function(value){//公有/特權方法 
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" 

這個模式與構造函數中定義特權方法的區別,就在於私有變量和函數是由實例共享的。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved