詳解JavaScript匿名函數(shù)和閉包
概述
在JavaScript前端開發(fā)中，函數(shù)與對(duì)其狀態(tài)即詞法環(huán)境（lexical environment）的引用共同構(gòu)成閉包（closure）。也就是說，閉包可以讓你從內(nèi)部函數(shù)訪問外部函數(shù)作用域。在JavaScript，函數(shù)在每次創(chuàng)建時(shí)生成閉包。匿名函數(shù)和閉包可以放在一起學(xué)習(xí)，可以加深理解。本文主要通過一些簡(jiǎn)單的小例子，簡(jiǎn)述匿名函數(shù)和閉包的常見用法，僅供學(xué)習(xí)分享使用，如有不足之處，還請(qǐng)指正。
普通函數(shù)
普通函數(shù)由fucntion關(guān)鍵字，函數(shù)名，() 和一對(duì){} 組成，如下所示：
function box(){
return 'Hex';
}
alert(box());
匿名函數(shù)
顧名思義，匿名函數(shù)就是沒有實(shí)際名字的函數(shù)。單獨(dú)的匿名函數(shù)無法運(yùn)行，如下所示：
function (){
return 'Hex';
}
//以上，會(huì)報(bào)錯(cuò)：缺少標(biāo)識(shí)符
如何解決匿名函數(shù)不能執(zhí)行的問題呢？有如下幾種方法：
1. 把匿名函數(shù)賦值給變量，如下所示：
//把匿名函數(shù)賦值給變量
var box=function(){
return 'Hex';
}
alert(box());
2. 通過自我執(zhí)行來調(diào)用函數(shù)，格式如下：(匿名函數(shù))()
(function(){
alert('Hex');
})();
3. 把匿名函數(shù)自我執(zhí)行的返回值賦值給變量，如下所示：
var box=(function(){
return 'Hex';
})();
alert(box);//注意：此處不帶括弧
4. 或者省去變量，如下所示：
alert((function() {
return 'Hex';
})());
自我執(zhí)行匿名函數(shù)如何傳遞參數(shù)呢？如下所示：
(function(age) {
alert('Hex--' + age);
})(30);
閉包（closure）
閉包是由函數(shù)以及創(chuàng)建該函數(shù)的詞法環(huán)境組合而成。這個(gè)環(huán)境包含了這個(gè)閉包創(chuàng)建時(shí)所能訪問的所有局部變量。簡(jiǎn)單理解：函數(shù)里面套函數(shù)，子函數(shù)可以訪問父函數(shù)的作用域里面的變量。
1. 函數(shù)里面放匿名函數(shù)，如下所示：
function box(){
//閉包
return function(){
return 'Hex';
}
}
alert(box()());
//或者
var b=box();
alert(b());
2. 通過閉包返回局部變量，使用閉包可以有一個(gè)優(yōu)點(diǎn)，和是它的缺點(diǎn)，可以是局部變量駐留在內(nèi)存中。
function box(){
var age=100;//此變量為函數(shù)的局部變量，外部無法訪問
return function(){
return age;
}
}
alert(box()());
閉包和全局變量相比較
1. 使用全局變量累加，如下所示：
var age=100;
function box(){
age++;
}
alert(age);
box();
alert(age);
box();
alert(age);
2. 使用局部變量累加，如下所示：
function box(){
var age=100;
age++;
return age;
}
alert(box());//無法實(shí)現(xiàn)累加
alert(box());//無法實(shí)現(xiàn)累加
alert(box());//無法實(shí)現(xiàn)累加
3. 使用閉包實(shí)現(xiàn)累加，如下所示：
function box(){
var age=100;
return function(){
age++;
return age;
}
}
var b=box();//將返回值賦值給b
alert(b());//實(shí)現(xiàn)累加
alert(b());//實(shí)現(xiàn)累加
alert(b());//實(shí)現(xiàn)累加
b=null;//使用閉包在調(diào)用結(jié)束時(shí)不會(huì)立即銷毀內(nèi)存，導(dǎo)致性能下降,所以需要解除占用
差異：使用全局變量，容易引起命名沖突，且系統(tǒng)性能下降。
循環(huán)匿名函數(shù)取值問題
1. 循環(huán)里的匿名函數(shù)取值問題，如下所示：沒有實(shí)現(xiàn)arr[0]=0,arr[1]=1 ...arr[4]=4的效果
function box(){
var arr=[];
for (var i=0;i<5;i++) {
arr[i]=function(){
return i;
}
}
//函數(shù)返回之前，循環(huán)已經(jīng)結(jié)束，i=5
return arr;
}
var b=box();
for (var i=0;i<5;i++) {
alert(b[i]()); //此時(shí)返回的都是5，沒有實(shí)現(xiàn)arr[0]=0,arr[1]=1 ...arr[4]=4的效果
}
以上問題如何優(yōu)化呢？
方法1，直接賦值，不采用閉包，如下所示：
function box(){
var arr=[];
for (var i=0;i<5;i++) {
arr[i]=i; //直接賦值
}
//函數(shù)返回之前，循環(huán)已經(jīng)結(jié)束，i=5
return arr;
}
var b=box();
for (var i=0;i<5;i++) {
alert(b[i]);
}
方法2，通過匿名函數(shù)的自我執(zhí)行，如下所示：
function box(){
var arr=[];
for (var i=0;i<5;i++) {
arr[i]=(function(num){
//此處可以有其他一些邏輯
return num;
})(i);
}
return arr;
}
var b=box();
for (var i=0;i<5;i++) {
alert(b[i]);
}
方法3，將變量駐留在內(nèi)存中，如下所示：
function box(){
var arr=[];
for (var i=0;i<5;i++) {
arr[i]=(function(num){
//此處可以有其他一些邏輯
return function(){
return num;
};
})(i);
}
return arr;
}
var b=box();
for (var i=0;i<5;i++) {
alert(b[i]());
}
關(guān)于this的指向問題
對(duì)于對(duì)象內(nèi)部，this指向?qū)ο蟊旧恚缦滤荆?/p>
var box={
getThis:function(){
return this;
}
};
alert(box.getThis());//輸出[object Object] //此處this指box對(duì)象
var user='The window';
var box={
user:'The box',
getUser:function(){
return this.user;
}
}
alert(box.getUser());//輸出：the box
this在閉包中，指示window對(duì)象，所以閉包在運(yùn)行時(shí)指向window，如下所示：
var box1 ={
getThis:function(){
return function(){
return this;
}
}
};
alert(box1.getThis()()); //輸出[object Window]//此處this是window對(duì)象
var box1={
user:'The box',
getUser:function(){
//此處的作用域是box1
return function(){
//此處的作用域是widow
return this.user;
};
}
}
alert(box1.getUser()());//輸出：the window ，表示閉包在運(yùn)行時(shí)模擬this指向window
如何讓閉包的this指向box呢？可以有如下兩種方法，如下所示：
alert(box1.getUser().call(box1));//對(duì)象冒充
//可以將box的作用域?qū)ο髠鬟f給閉包
var box1={
user:'The box',
getUser:function(){
var that=this;
return function(){
return that.user;
};
}
}
alert(box1.getUser()());
缺點(diǎn)：閉包無法釋放對(duì)象，容易導(dǎo)致內(nèi)存泄漏，如下所示：
function box(){
var a1=document.getElementById('A01');
var txt=a1.innerHTML;
a1.onclick=function(){
//如果a1為null，則會(huì)報(bào)錯(cuò)
//alert(a1.innerHTML);//點(diǎn)擊事件獲取內(nèi)容,
alert(txt);
}
//如無下面一句，則會(huì)導(dǎo)致內(nèi)存無法釋放對(duì)象a1
a1=null;//此處需要手動(dòng)將a1釋放，等待回收
}
box();
塊級(jí)作用域
模仿塊級(jí)作用域，面向?qū)ο蟮乃枷?，封裝變量。普通函數(shù)沒有塊級(jí)作用域的概念，如下所示：
function box(){
for (var i=0;i<5;i++) {
}
alert(i);//輸出：5，表示出了for語(yǔ)句塊，i依然可以訪問
}
box();
如何讓i私有化，出了作用域，不可以訪問呢?可以采用匿名函數(shù)的自我執(zhí)行，則出了作用域就會(huì)訪問不到，如下所示：
function box(){
(function(){
for (var i=0;i<5;i++) {
}
})();
//alert(i);//報(bào)錯(cuò)：提示“i”未定義
}
box();
全局變量的私有作用域，減少變量的命名沖突，如下所示：
(function(){
//此處就是全局作用域里面的私有作用域
var age=100;
alert(age);
})();
//alert(age);////報(bào)錯(cuò)：提示“age”未定義
普通函數(shù)和構(gòu)造函數(shù)的區(qū)別：首字母大寫。如下所示：對(duì)象的屬性和函數(shù)都是public類型的
function Box(){
this.age=100; //此處是公有屬性，無法私有化
//函數(shù)也是公有函數(shù)
this.run=function(){
return 'running....';
}
}
var box=new Box();
alert(box.age); //通過對(duì)象可以訪問
alert(box.run());//通過對(duì)象可以訪問
如何將公有屬性，私有化呢? 如下所示：
function Box(){
var age=100;//私有變量，外部訪問不到
function run(){//私有函數(shù)，外部訪問不到
return 'running....';
}
//對(duì)外公布的訪問接口，可以訪問私有內(nèi)容
this.go=function(){
return age+' '+run();
}
}
var box=new Box();
alert(box.go());
通過構(gòu)造函數(shù)傳遞參數(shù)，如下所示：
function Box(v){
var user=v;
this.getUser=function(){
return user;
};
this.setUser=function(v){
user=v;
}
}
var box=new Box('Hex');
alert(box.getUser());
//對(duì)象方法可以在創(chuàng)建的時(shí)候，創(chuàng)建多次
注意：通過構(gòu)造函數(shù)創(chuàng)建對(duì)象，在每次創(chuàng)建的時(shí)候，都會(huì)分配不同的地址。
靜態(tài)私有變量
采用靜態(tài)私有變量，可以實(shí)現(xiàn)數(shù)據(jù)的共享，如下所示：
(function(){
var user=''; //私有變量
Box=function(value){//必須全局構(gòu)造函數(shù)，將匿名函數(shù)賦值給Box,否則外部無法訪問
user=value;
}
Box.prototype.getUser=function(){
return user;
};
Box.prototype.setUser=function(value){
user=value;
};
})();
var box=new Box('AAAA'); //第一次實(shí)例化
alert(box.getUser());//輸出AAAA
var box2=new Box('BBBB');//第二次實(shí)例化
alert(box.getUser());//輸出BBBB
單例對(duì)象
單例即只有一個(gè)實(shí)例化的對(duì)象，可以有兩種實(shí)現(xiàn)方式。
1. 通過字面量的方式實(shí)現(xiàn)，如下所示：
var box={
user:'hex',
go:function(){
return user+' is running....';
}
};
alert(box.go());
2. 通過匿名函數(shù)的自我執(zhí)行返回對(duì)象的方式實(shí)現(xiàn)，如下所示：
var box=function(){
var user='Hex'; //私有變量
function run(){ //私有函數(shù)
return ' is running....';
}
//返回一個(gè)對(duì)象
var obj= {
//公共特權(quán)方法
going:function(){
return user+run();
}
}
return obj;
}();
alert(box.going());
以上就是詳解JavaScript匿名函數(shù)和閉包的詳細(xì)內(nèi)容，更多關(guān)于JavaScript匿名函數(shù)和閉包的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
javascript instanceof 與typeof使用說明
instanceof和typeof都能用來判斷一個(gè)變量是否為空或是什么類型的變量。2010-01-01
javaScript arguments 對(duì)象使用介紹
函數(shù)體內(nèi)可以通過 arguments 對(duì)象來接收傳遞進(jìn)來的參數(shù)，下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-10-10
簡(jiǎn)單談?wù)凧avascript函數(shù)中的arguments
在JavaScript中，arguments對(duì)象是比較特別的一個(gè)對(duì)象，實(shí)際上是當(dāng)前函數(shù)的一個(gè)內(nèi)置屬性。下面這篇文章主要介紹了關(guān)于Javascript函數(shù)中的arguments面貌以及如何轉(zhuǎn)化為數(shù)組的相關(guān)資料，需要的朋友可以參考借鑒，下面來一起看看吧。2017-02-02
這篇文章主要介紹了代碼獲取歷史上的今天發(fā)生的事，數(shù)據(jù)來源于wiki,需要的朋友可以參考下2014-04-04
本篇文章主要講述了，在JavaScript 中把一個(gè)對(duì)象的屬性或者方法 mixin 到另一個(gè)2013-04-04
JavaScript數(shù)據(jù)類型轉(zhuǎn)換
本文詳細(xì)講解了JavaScript實(shí)現(xiàn)數(shù)據(jù)類型轉(zhuǎn)換的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
本文譯自 Github 上的一篇文章，目的是對(duì)還不太熟悉 ES6語(yǔ)法的同學(xué)做一個(gè)簡(jiǎn)單的掃盲。下面一起來學(xué)習(xí)。2016-07-07
Javascript標(biāo)準(zhǔn)DOM Range操作全集
Javascript標(biāo)準(zhǔn)DOM Range操作全集...2007-01-01
一個(gè)HTML頁(yè)面可以有一個(gè)或多個(gè)子框架，這些子框架以<iframe>來標(biāo)記，用來顯示一個(gè)獨(dú)立的HTML頁(yè)面。這里所講的框架編程包括框架的自我控制以及框架之間的互相訪問，例如從一個(gè)框架中引用另一個(gè)框架中的JavaScript變量、調(diào)用其他框架內(nèi)的函數(shù)、控制另一個(gè)框架中表單的行為等2014-03-03
toFixed() 方法可把 Number 四舍五入為指定小數(shù)位數(shù)的數(shù)字。2010-04-04