【笔记】JavaScript闭包的常见使用

自己总结出来的使用方法。。。。Mark一下！

1。循环绑定

No Use：

 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：

 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：

 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：

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

结果：弹出12。

分析：多了两个全局变量a与b。

Use：

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

 

结果：弹出12。

分析：函数执行完，变量a与b消失，不存在全局变量。

5。将json对象的公用函数私有化

No Use：

 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方式访问。与第二种类似。

暂时就想到那么多，最后一句，可以的话，还是尽量少用闭包。