【筆記】JavaScript閉包的常見使用

自己總結出來的使用方法。。。。Mark一下！

1。迴圈綁定

No Use：

1 var lists = document.getElementsByTagName(‘li’);
2 for(var i=0;i<lists.length;i<l;i++){
3     lists[i].onclick=function(){alert(i);};
4 }
5 

結果：點擊每一個li，都是彈出lists.length的值。

原因：onclick事件中的i值只是引用，最後迴圈執行完了，i = lists.length。

Use：

1 var lists = document.getElementsByTagName(‘li’);
2 for(var i=0;i<lists.length;i<l;i++){
3     lists[i].onclick=function(i){return function(){alert(i);}}(i);
4 }
5 

結果：點擊每一個li，彈出對應li的編號i值。

原因：將i值傳遞進內部的函數中，此時函數已經執行了，所以，i這個值就是當時的值。

 

2。配置對應訪問

No Use：

function getType(type){
var list = {
    ‘a’:’配置一’,
    ‘b’:’配置二’,
    ‘c’:’配置三’
}
return list[type];
}

結果：返回需要的配置值。

分析：每次調用都需要重新定義list變數以及賦值;

 Use：

 1 var getType = function(){
 2     var list = {
 3         ‘a’:’配置一’,
 4         ‘b’:’配置二’,
 5         ‘c’:’配置三’
 6 };
 7 return function(type){
 8     return list[type];
 9 };
10 }();
11 

結果：返回需要配置值。

分析：只需要定義與賦值一次list變數。

 

3。封裝類

No Use：

1 function ClassA(name){
2     this.name = name;
3     this.getName = function(){
4          return this.name;
5     }
6 }

結果：正常定義需要類。

 Use：

 1 var ClassA = function(){
 2     function init(name){
 3         this.name = name;
 4         this.getName = function(){
 5         return this.name;
 6                 }
 7         }
 8 return init;
 9 }();
10 

結果：更進一步封裝類。看起來優雅些。

 

4。自執行，避免全域變數汙染

No Use：

1 var a = ‘1’;
2 var b = ‘2’;
3 alert(a+b);
4 

結果：彈出12。

分析：多了兩個全域變數a與b。

Use：

1 ~function(){
2      var a = ‘1’;
3      var b = ‘2’;
4      alert(a+b);
5 }();
6 

 

結果：彈出12。

分析：函數執行完，變數a與b消失，不存在全域變數。

 

5。將json對象的公用函數私人化

No Use：

1 var data = {
2     getA:function(){return ‘A’},
3     getB:function(){return ‘B’},
4     p_get:function(){return this.getA()+this.getB();}
5 }
6 data.p_get();
7 

 

結果：返回’AB’。

分析：getA與getB方法，只是提供給p_get方法使用，屬於私人方法，不應該變成公用方法，data.getA()也能訪問得到。

Use：

 1 var data = function(){
 2     function getA(){return ‘A’};
 3     function getB(){return ‘B’};
 4     var json = {
 5         p_get:function(){return getA()+getB();}
 6         }
 7 return json;
 8 }();
 9 data.p_get();
10 

 

結果：返回’AB’；

分析：getA與getB只能在內部訪問，無法通過data.getA方式訪問。與第二種類似。

 

暫時就想到那麼多，最後一句，可以的話，還是盡量少用閉包。