标签:des blog http os io 使用 java ar strong
什么是闭包?
function a(){
var i=0;
function b(){
alert(i);
}
return b;
}
var c = a();
c();
全局变量c指定对 函数a的内部函数b的引用;内部函数b的执行需要依赖函数a的资源;
这里就产生一个闭包,使得a在执行完毕并返回后,不会被javascript垃圾回收机制GC回收。
因为这里c还在引用着b,而b依赖着a,故a在使用后,仍然存在于内存中。
简而言之:当函数a的内部函数b被函数a外的一个变量引用的时候,就创建了一个闭包。
闭包的应用场景
1.使用闭包代替全局变量
2.函数外或在其他函数中访问某一函数内部的参数
3.在函数执行之前为要执行的函数提供具体参数
4.在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数
5.为节点循环绑定click事件,在事件函数中使用当次循环的值或节点,而不是最后一次循环的值或节点
6.暂停执行
7.包装相关功能
1.使用闭包代替全局变量
全局变量有变量污染和变量安全等问题。
//闭包,test2是局部变量,这是闭包的目的
//我们经常在小范围使用全局变量,这个时候就可以使用闭包来代替。
(function(){
var test2=222;
function outer(){
alert(test2);
}
function test(){
alert("测试闭包:"+test2);
}
outer(); //222
test(); //测试闭包:222
}
)();
alert(test2); //未定义,这里就访问不到test2
2.函数外或在其他函数中访问某一函数内部的参数
为了解决在Ajax callback回调函数中经常需要继续使用主调函数的某一些参数。
function f1(){
var test=111;
tmp_test=function(){return test;} //tmp_test是全局变量,这里对test的引用,产生闭包
}
function f2(){
alert("测试一:"+tmp_test());
var test1=tmp_test();
alert("测试二:"+test1);
}
f1();
f2();
//测试一:111
//测试二:111
alert(tmp_test()); //111
tmp_test=null;
3.在函数执行之前为要执行的函数提供具体参数
某些情况下,是无法为要执行的函数提供参数,只能在函数执行之前,提前提供参数。
有哪些情况是延迟执行?
如:setTimeOut
setInterval
Ajax callbacks
event handler[el.onclick=func 、 el.attachEvent("onclick",func)]
4.在函数执行之前为函数提供只有在函数执行或引用时才能知道的具体参数
//以下是解决方式
function associateObjWithEvent(obj,methodName){
return (function(e){
e=e||window.event;
return obj[methodName](e,this);//重点看这里!有两个参数,
//e:event,元素绑定事件时,绑定的是对内部函数的引用,故在触发事件时,执行的是内部函数。
//内部函数有个e参数,刚好在事件触发时,能捕获到是什么事件类型。
//this:这里需要的就是this参数,以便当元素触发事件处理函数执行时,this=触发事件的元素本身
//this参数无法从外部传入进来。传入进来的this都会被转化特定对象
);
}
function DhtmlObject(elId){
var el=document.getElementById(elId);
if(el){
//el.onclick=associateObjWithEvent(this,"doOnClick");
el.onmouseover=associateObjWithEvent(this,"doMouseOver");
el.onmouseout=associateObjWithEvent(this,"doMouseOut");
}
}
DhtmlObject.prototype.doMouseOver=function(event,element){
alert(event);//第一个参数,只在事件执行时,才知道是什么事件,这里是MouseEvent
alert(arguments[0]);//第一参数,
alert(element);//第二个参数,只在事件执行时,才知道是指代触发事件的元素本身
alert(arguments[1]);//第二个参数
}
var hello=new DhtmlObject("hello"); //执行
另一个例子
function associateObjWithEvent(obj,methodName){
return (function(e){
e=e||window.event;
return obj[methodName](e);
});
}
function DragListener(){
this.down=function(){
alert(this)
alert(arguments[0])
},
this.move=function(){
alert(2)
}
}
var obj=new DragListener();
document.getElementById("hello").onmousedown =obj.down;//正确 但我们在方法中用this访问到的对象是 dom
document.getElementById("hello").onmousemove = obj.move;//正确
document.getElementById("hello").onmousedown =associateObjWithEvent(obj,‘down‘);//正确
document.getElementById("hello").onmousemove = associateObjWithEvent(obj,‘move‘);//正确
改进的例子,无限参数
标签:des blog http os io 使用 java ar strong
原文地址:http://www.cnblogs.com/sunrise/p/3962291.html