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

 

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