JavaScript匿名函數和閉包

概述

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

閉包(closure)

閉包是由函數以及建立該函數的詞法環境組合而成。這個環境包含了這個閉包建立時所能訪問的全部局部變量。簡單理解:函數裏面套函數,子函數能夠訪問父函數的做用域裏面的變量。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的指向問題

對於對象內部,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());

備註

望嶽

做者:杜甫 (唐)

岱宗夫如何?齊魯青未了。 造化鍾神秀,陰陽割昏曉。 蕩胸生曾雲,決眥入歸鳥。 會當凌絕頂,一覽衆山小。
相關文章
相關標籤/搜索