在JavaScript前端開發中,函數與對其狀態即詞法環境(lexical environment)的引用共同構成閉包(closure)。也就是說,閉包可讓你從內部函數訪問外部函數做用域。在JavaScript,函數在每次建立時生成閉包。匿名函數和閉包能夠放在一塊兒學習,能夠加深理解。本文主要經過一些簡單的小例子,簡述匿名函數和閉包的常見用法,僅供學習分享使用,若有不足之處,還請指正。前端
普通函數由fucntion關鍵字,函數名,() 和一對{} 組成,以下所示:閉包
1 function box(){ 2 return 'Hex'; 3 } 4 alert(box());
顧名思義,匿名函數就是沒有實際名字的函數。單獨的匿名函數沒法運行,以下所示:函數
1 function (){ 2 return 'Hex'; 3 } 4 //以上,會報錯:缺乏標識符
如何解決匿名函數不能執行的問題呢?有以下幾種方法:性能
1. 把匿名函數賦值給變量,以下所示:學習
1 //把匿名函數賦值給變量 2 var box=function(){ 3 return 'Hex'; 4 } 5 alert(box());
2. 經過自我執行來調用函數,格式以下:(匿名函數)()優化
1 (function(){ 2 alert('Hex'); 3 })();
3. 把匿名函數自我執行的返回值賦值給變量,以下所示:this
1 var box=(function(){ 2 return 'Hex'; 3 })(); 4 alert(box);//注意:此處不帶括弧
4. 或者省去變量,以下所示:spa
1 alert((function() { 2 return 'Hex'; 3 })());
自我執行匿名函數如何傳遞參數呢?以下所示:prototype
1 (function(age) { 2 alert('Hex--' + age); 3 })(30);
閉包是由函數以及建立該函數的詞法環境組合而成。這個環境包含了這個閉包建立時所能訪問的全部局部變量。簡單理解:函數裏面套函數,子函數能夠訪問父函數的做用域裏面的變量。code
1. 函數裏面放匿名函數,以下所示:
1 function box(){ 2 //閉包 3 return function(){ 4 return 'Hex'; 5 } 6 } 7 alert(box()()); 8 //或者 9 var b=box(); 10 alert(b());
2. 經過閉包返回局部變量,使用閉包能夠有一個優勢,和是它的缺點,能夠是局部變量駐留在內存中。
1 function box(){ 2 var age=100;//此變量爲函數的局部變量,外部沒法訪問 3 return function(){ 4 return age; 5 } 6 } 7 alert(box()());
1. 使用全局變量累加,以下所示:
1 var age=100; 2 function box(){ 3 age++; 4 } 5 alert(age); 6 box(); 7 alert(age); 8 box(); 9 alert(age);
2. 使用局部變量累加,以下所示:
1 function box(){ 2 var age=100; 3 age++; 4 return age; 5 } 6 alert(box());//沒法實現累加 7 alert(box());//沒法實現累加 8 alert(box());//沒法實現累加
3. 使用閉包實現累加,以下所示:
1 function box(){ 2 var age=100; 3 return function(){ 4 age++; 5 return age; 6 } 7 } 8 var b=box();//將返回值賦值給b 9 alert(b());//實現累加 10 alert(b());//實現累加 11 alert(b());//實現累加 12 b=null;//使用閉包在調用結束時不會當即銷燬內存,致使性能降低,因此須要解除佔用
差別:使用全局變量,容易引發命名衝突,且系統性能降低。
1. 循環裏的匿名函數取值問題,以下所示:沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=function(){ 5 return i; 6 } 7 } 8 //函數返回以前,循環已經結束,i=5 9 return arr; 10 } 11 var b=box(); 12 for (var i=0;i<5;i++) { 13 alert(b[i]()); //此時返回的都是5,沒有實現arr[0]=0,arr[1]=1 ...arr[4]=4的效果 14 }
以上問題如何優化呢?
方法1,直接賦值,不採用閉包,以下所示:
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=i; //直接賦值 5 } 6 //函數返回以前,循環已經結束,i=5 7 return arr; 8 } 9 var b=box(); 10 for (var i=0;i<5;i++) { 11 alert(b[i]); 12 }
方法2,經過匿名函數的自我執行,以下所示:
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=(function(num){ 5 //此處能夠有其餘一些邏輯 6 return num; 7 })(i); 8 } 9 return arr; 10 } 11 var b=box(); 12 for (var i=0;i<5;i++) { 13 alert(b[i]); 14 }
方法3,將變量駐留在內存中,以下所示:
1 function box(){ 2 var arr=[]; 3 for (var i=0;i<5;i++) { 4 arr[i]=(function(num){ 5 //此處能夠有其餘一些邏輯 6 return function(){ 7 return num; 8 }; 9 })(i); 10 } 11 return arr; 12 } 13 var b=box(); 14 for (var i=0;i<5;i++) { 15 alert(b[i]()); 16 }
對於對象內部,this指向對象自己,以下所示:
1 var box={ 2 getThis:function(){ 3 return this; 4 } 5 }; 6 alert(box.getThis());//輸出[object Object] //此處this指box對象
1 var user='The window'; 2 var box={ 3 user:'The box', 4 getUser:function(){ 5 return this.user; 6 } 7 } 8 alert(box.getUser());//輸出:the box
this在閉包中,指示window對象,因此閉包在運行時指向window,以下所示:
1 var box1 ={ 2 getThis:function(){ 3 return function(){ 4 return this; 5 } 6 } 7 }; 8 alert(box1.getThis()()); //輸出[object Window]//此處this是window對象
1 var box1={ 2 user:'The box', 3 getUser:function(){ 4 //此處的做用域是box1 5 return function(){ 6 //此處的做用域是widow 7 return this.user; 8 }; 9 } 10 } 11 alert(box1.getUser()());//輸出:the window ,表示閉包在運行時模擬this指向window
如何讓閉包的this指向box呢?能夠有以下兩種方法,以下所示:
1 alert(box1.getUser().call(box1));//對象冒充 2 //能夠將box的做用域對象傳遞給閉包 3 var box1={ 4 user:'The box', 5 getUser:function(){ 6 var that=this; 7 return function(){ 8 return that.user; 9 }; 10 } 11 } 12 alert(box1.getUser()());
缺點:閉包沒法釋放對象,容易致使內存泄漏,以下所示:
1 function box(){ 2 var a1=document.getElementById('A01'); 3 var txt=a1.innerHTML; 4 a1.onclick=function(){ 5 //若是a1爲null,則會報錯 6 //alert(a1.innerHTML);//點擊事件獲取內容, 7 alert(txt); 8 } 9 //如無下面一句,則會致使內存沒法釋放對象a1 10 a1=null;//此處須要手動將a1釋放,等待回收 11 } 12 box();
模仿塊級做用域,面向對象的思想,封裝變量。普通函數沒有塊級做用域的概念,以下所示:
1 function box(){ 2 for (var i=0;i<5;i++) { 3 4 } 5 alert(i);//輸出:5,表示出了for語句塊,i依然能夠訪問 6 } 7 box();
如何讓i私有化,出了做用域,不能夠訪問呢?能夠採用匿名函數的自我執行,則出了做用域就會訪問不到,以下所示:
1 function box(){ 2 (function(){ 3 for (var i=0;i<5;i++) { 4 5 } 6 })(); 7 //alert(i);//報錯:提示「i」未定義 8 } 9 box();
全局變量的私有做用域,減小變量的命名衝突,以下所示:
1 (function(){ 2 //此處就是全局做用域裏面的私有做用域 3 var age=100; 4 alert(age); 5 })(); 6 //alert(age);////報錯:提示「age」未定義
普通函數和構造函數的區別:首字母大寫。以下所示:對象的屬性和函數都是public類型的
1 function Box(){ 2 this.age=100; //此處是公有屬性,沒法私有化 3 //函數也是公有函數 4 this.run=function(){ 5 return 'running....'; 6 } 7 } 8 var box=new Box(); 9 alert(box.age); //經過對象能夠訪問 10 alert(box.run());//經過對象能夠訪問
如何將公有屬性,私有化呢? 以下所示:
1 function Box(){ 2 var age=100;//私有變量,外部訪問不到 3 function run(){//私有函數,外部訪問不到 4 return 'running....'; 5 } 6 //對外公佈的訪問接口,能夠訪問私有內容 7 this.go=function(){ 8 return age+' '+run(); 9 } 10 } 11 var box=new Box(); 12 alert(box.go());
經過構造函數傳遞參數,以下所示:
1 function Box(v){ 2 var user=v; 3 this.getUser=function(){ 4 return user; 5 }; 6 this.setUser=function(v){ 7 user=v; 8 } 9 } 10 var box=new Box('Hex'); 11 alert(box.getUser()); 12 //對象方法能夠在建立的時候,建立屢次
注意:經過構造函數建立對象,在每次建立的時候,都會分配不一樣的地址。
採用靜態私有變量,能夠實現數據的共享,以下所示:
1 (function(){ 2 var user=''; //私有變量 3 Box=function(value){//必須全局構造函數,將匿名函數賦值給Box,不然外部沒法訪問 4 user=value; 5 } 6 Box.prototype.getUser=function(){ 7 return user; 8 }; 9 Box.prototype.setUser=function(value){ 10 user=value; 11 }; 12 })(); 13 var box=new Box('AAAA'); //第一次實例化 14 alert(box.getUser());//輸出AAAA 15 var box2=new Box('BBBB');//第二次實例化 16 alert(box.getUser());//輸出BBBB
單例即只有一個實例化的對象,能夠有兩種實現方式。
1. 經過字面量的方式實現,以下所示:
1 var box={ 2 user:'hex', 3 go:function(){ 4 return user+' is running....'; 5 } 6 }; 7 alert(box.go());
2. 經過匿名函數的自我執行返回對象的方式實現,以下所示:
1 var box=function(){ 2 var user='Hex'; //私有變量 3 function run(){ //私有函數 4 return ' is running....'; 5 } 6 //返回一個對象 7 var obj= { 8 //公共特權方法 9 going:function(){ 10 return user+run(); 11 } 12 } 13 return obj; 14 }(); 15 alert(box.going());