【笔记】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
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
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];
}
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
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 }
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
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
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
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
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
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方式访问。与第二种类似。
暂时就想到那么多,最后一句,可以的话,还是尽量少用闭包。