溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關JavaScript匿名函數和閉包是什么，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。
概述
在JavaScript前端開發中，函數與對其狀態即詞法環境（lexical environment）的引用共同構成閉包（closure）。也就是說，閉包可以讓你從內部函數訪問外部函數作用域。在JavaScript，函數在每次創建時生成閉包。匿名函數和閉包可以放在一起學習，可以加深理解。本文主要通過一些簡單的小例子，簡述匿名函數和閉包的常見用法，僅供學習分享使用，如有不足之處，還請指正。
普通函數
普通函數由fucntion關鍵字，函數名，() 和一對{} 組成，如下所示：
function box(){
return 'Hex';
}
alert(box());匿名函數
顧名思義，匿名函數就是沒有實際名字的函數。單獨的匿名函數無法運行，如下所示：
function (){
return 'Hex';
}
//以上，會報錯：缺少標識符如何解決匿名函數不能執行的問題呢？有如下幾種方法：
1. 把匿名函數賦值給變量，如下所示：
//把匿名函數賦值給變量
var box=function(){
return 'Hex';
}
alert(box());2. 通過自我執行來調用函數，格式如下：(匿名函數)()
(function(){
alert('Hex');
})();3. 把匿名函數自我執行的返回值賦值給變量，如下所示：
var box=(function(){
return 'Hex';
})();
alert(box);//注意：此處不帶括弧4. 或者省去變量，如下所示：
alert((function() {
return 'Hex';
})());自我執行匿名函數如何傳遞參數呢？如下所示：
(function(age) {
alert('Hex--' + age);
})(30);閉包（closure）
閉包是由函數以及創建該函數的詞法環境組合而成。這個環境包含了這個閉包創建時所能訪問的所有局部變量。簡單理解：函數里面套函數，子函數可以訪問父函數的作用域里面的變量。
1. 函數里面放匿名函數，如下所示：
function box(){
//閉包
return function(){
return 'Hex';
}
}
alert(box()());
//或者
var b=box();
alert(b());2. 通過閉包返回局部變量，使用閉包可以有一個優點，和是它的缺點，可以是局部變量駐留在內存中。
function box(){
var age=100;//此變量為函數的局部變量，外部無法訪問
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());//無法實現累加
alert(box());//無法實現累加
alert(box());//無法實現累加3. 使用閉包實現累加，如下所示：
function box(){
var age=100;
return function(){
age++;
return age;
}
}
var b=box();//將返回值賦值給b
alert(b());//實現累加
alert(b());//實現累加
alert(b());//實現累加
b=null;//使用閉包在調用結束時不會立即銷毀內存，導致性能下降,所以需要解除占用差異：使用全局變量，容易引起命名沖突，且系統性能下降。
循環匿名函數取值問題
1. 循環里的匿名函數取值問題，如下所示：沒有實現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;
}
}
//函數返回之前，循環已經結束，i=5
return arr;
}
var b=box();
for (var i=0;i<5;i++) {
alert(b[i]()); //此時返回的都是5，沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果
}以上問題如何優化呢？
方法1，直接賦值，不采用閉包，如下所示：
function box(){
var arr=[];
for (var i=0;i<5;i++) {
arr[i]=i; //直接賦值
}
//函數返回之前，循環已經結束，i=5
return arr;
}
var b=box();
for (var i=0;i<5;i++) {
alert(b[i]);
}方法2，通過匿名函數的自我執行，如下所示：
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，將變量駐留在內存中，如下所示：
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]());
}關于this的指向問題
對于對象內部，this指向對象本身，如下所示：
var box={
getThis:function(){
return this;
}
};
alert(box.getThis());//輸出[object Object] //此處this指box對象var user='The window';
var box={
user:'The box',
getUser:function(){
return this.user;
}
}
alert(box.getUser());//輸出：the boxthis在閉包中，指示window對象，所以閉包在運行時指向window，如下所示：
var box1 ={
getThis:function(){
return function(){
return this;
}
}
};
alert(box1.getThis()()); //輸出[object Window]//此處this是window對象var box1={
user:'The box',
getUser:function(){
//此處的作用域是box1
return function(){
//此處的作用域是widow
return this.user;
};
}
}
alert(box1.getUser()());//輸出：the window ，表示閉包在運行時模擬this指向window如何讓閉包的this指向box呢？可以有如下兩種方法，如下所示：
alert(box1.getUser().call(box1));//對象冒充
//可以將box的作用域對象傳遞給閉包
var box1={
user:'The box',
getUser:function(){
var that=this;
return function(){
return that.user;
};
}
}
alert(box1.getUser()());缺點：閉包無法釋放對象，容易導致內存泄漏，如下所示：
function box(){
var a1=document.getElementById('A01');
var txt=a1.innerHTML;
a1.onclick=function(){
//如果a1為null，則會報錯
//alert(a1.innerHTML);//點擊事件獲取內容,
alert(txt);
}
//如無下面一句，則會導致內存無法釋放對象a1
a1=null;//此處需要手動將a1釋放，等待回收
}
box();塊級作用域
模仿塊級作用域，面向對象的思想，封裝變量。普通函數沒有塊級作用域的概念，如下所示：
function box(){
for (var i=0;i<5;i++) {
}
alert(i);//輸出：5，表示出了for語句塊，i依然可以訪問
}
box();如何讓i私有化，出了作用域，不可以訪問呢?可以采用匿名函數的自我執行，則出了作用域就會訪問不到，如下所示：
function box(){
(function(){
for (var i=0;i<5;i++) {
}
})();
//alert(i);//報錯：提示“i”未定義
}
box();全局變量的私有作用域，減少變量的命名沖突，如下所示：
(function(){
//此處就是全局作用域里面的私有作用域
var age=100;
alert(age);
})();
//alert(age);////報錯：提示“age”未定義普通函數和構造函數的區別：首字母大寫。如下所示：對象的屬性和函數都是public類型的
function Box(){
this.age=100; //此處是公有屬性，無法私有化
//函數也是公有函數
this.run=function(){
return 'running....';
}
}
var box=new Box();
alert(box.age); //通過對象可以訪問
alert(box.run());//通過對象可以訪問如何將公有屬性，私有化呢? 如下所示：
function Box(){
var age=100;//私有變量，外部訪問不到
function run(){//私有函數，外部訪問不到
return 'running....';
}
//對外公布的訪問接口，可以訪問私有內容
this.go=function(){
return age+' '+run();
}
}
var box=new Box();
alert(box.go());通過構造函數傳遞參數，如下所示：
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());
//對象方法可以在創建的時候，創建多次注意：通過構造函數創建對象，在每次創建的時候，都會分配不同的地址。
靜態私有變量
采用靜態私有變量，可以實現數據的共享，如下所示：
(function(){
var user=''; //私有變量
Box=function(value){//必須全局構造函數，將匿名函數賦值給Box,否則外部無法訪問
user=value;
}
Box.prototype.getUser=function(){
return user;
};
Box.prototype.setUser=function(value){
user=value;
};
})();
var box=new Box('AAAA'); //第一次實例化
alert(box.getUser());//輸出AAAA
var box2=new Box('BBBB');//第二次實例化
alert(box.getUser());//輸出BBBB單例對象
單例即只有一個實例化的對象，可以有兩種實現方式。
1. 通過字面量的方式實現，如下所示：
var box={
user:'hex',
go:function(){
return user+' is running....';
}
};
alert(box.go());2. 通過匿名函數的自我執行返回對象的方式實現，如下所示：
var box=function(){
var user='Hex'; //私有變量
function run(){ //私有函數
return ' is running....';
}
//返回一個對象
var obj= {
//公共特權方法
going:function(){
return user+run();
}
}
return obj;
}();
alert(box.going());關于JavaScript匿名函數和閉包是什么就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
