详解JavaScript中的函数与闭包

二、闭包的产生

functionFoo(){

functionA(){}

functionB(){}

functionC(){}

}

我们每次执行Foo()的时候，都有有A,B,C这三个函数实例(闭包)产生，当Foo执行完毕，生成的实例没有其他引用，因此会被当成垃圾随之销毁（不一定是马上销毁）。

varscope="globalscope";
functioncheckscope(){
varscope="localscope";
functionf(){returnscope;}
returnf;
}
checkscope()()

为了加深印象，对比下面两个例子,

写法一：用了预先定义的函数实例returnNumber

functioncreateFunctions(){
varresult=newArray();
for(vari=0;i<10;i++){
result[i]=returnNumber;
}
returnresult;
}

functionreturnNumber(i){
returni;
}

functioncreateFunctions(){
varresult=newArray();
for(vari=0;i<10;i++){
result[i]=function(){returni;};
}
returnresult;
}

varfuncs=createFunctions();

for(vari=funcs.length-1;i>=0;i--){
alert(funcs[i]());
}

varfuncs=createFunctions();

(function(){
　　for(vari=funcs.length-1;i>=0;i--){
　　alert(funcs[i]());
　　}
})();

(function(){

functionA(){}

functionB(){}

functionC(){}

}())

functionA(){}//比较省内存的写法，创建对象速度快，开销小
(function(prototype){
varname="a";

functionsayName(){
alert(name);
}

functionChangeName(){
name+="_changed"
}

prototype.sayName=sayName;//引用通过执行匿名函数产生的闭包，闭包只会产生一次
prototype.changeName=ChangeName;

}(A.prototype))

vara1=newA();
vara2=newA();

a1.sayName();
a1.changeName();
a2.sayName();

functionB(){//原型链比较短的做法，找到方法的速度快，但是比较耗内存，每次new调用构造器都有2个函数实例和1个变量产生。
varname="b";

functionsayName(){
alert(name);
}

functionchangeName(){
name+="_changed";
}

this.sayName=sayName;//引用闭包，每次调用函数B都会产生新的闭包
this.changeName=changeName;

}

//如果函数调用之前带有new关键字，则函数作为构造器使用。
//本质上来说作为构造器和作为普通函数调用没区别。如果直接调用B(),那么this对象会绑定到全局对象，新生成的闭包会代替旧的闭包赋给全局对象的changeName和sayName属性上，因此旧的闭包会被当成垃圾回收。
//如果作为构造器使用，new关键字会生成一个新的对象(this指向这个新对象)并初始化这个新对象的sayName和changeName属性，因此每次生成的闭包都会因为有引用而保留下来。
varb1=newB();
b1.sayName();
b1.changeName();
b1.sayName();

varb2=newB();
b2.sayName();
b1.sayName();

三、闭包的使用

如前面所述，函数在调用时，会产生用于保存局部变量的对象(activeobject)，并加入作用域链中，那么会有如下问题

functioncreateFunctions(){//(闭包1)
varresult=newArray();
for(vari=0;i<10;i++){
result[i]=function(){//(闭包2)，生成了10份。闭包2生成时会把闭包1保存变量的对象加入到自己的作用域链中。定义函数的时候生成作用域链。
　　　　　　　　returni;//i并不是定义在(闭包2)中的局部变量或者形参，因此不会被加入到(闭包2)的保存变量的对象中。i来自(闭包1)，(闭包1)只有一份,因此10个(闭包2)共享1个变量i.
　　　　　　}
};

returnresult;
}

修改法1:在外加一层闭包，给一个形参

functioncreateFunctions(){
varresult=newArray();

for(vari=0;i<10;i++){
result[i]=function(num){
returnfunction(){
returnnum;
};
}(i);
}

returnresult;
}

functioncreateFunctions(){
varresult=newArray();
for(vari=0;i<10;i++){
　　result[i]=function(){
　　　　varnum=i;
　　　　returnfunction(){
　　　　　　returnnum;
　　　　};
　　}();
}
　　　　returnresult;
}

functioncreateFunctions(){
　　varresult=newArray();
　　for(vari=0;i<10;i++){
(result[i]=function(){
　　returnargument.callee.num;
}).num=i;
　　}
　　
　　returnresult;
}

四、泄漏问题：

<divid="myDiv">
<inputtype="button"value="ClickMe"id="myBtn">
</div>

<scripttype="text/javascript">

varbtn=document.getElementById("myBtn");
btn.onclick=function(){

//先执行某些操作
document.getElementById("myDiv").innerHTML="Processing...";//出问题了!

};
</script>

varDragDrop=function(){

vardragdrop=newEventTarget(),
dragging=null,
diffX=0,
diffY=0;

functionhandleEvent(event){

//geteventandtarget
event=EventUtil.getEvent(event);
vartarget=EventUtil.getTarget(event);

//determinethetypeofevent
switch(event.type){
case"mousedown":
if(target.className.indexOf("draggable")>-1){
dragging=target;
diffX=event.clientX-target.offsetLeft;
diffY=event.clientY-target.offsetTop;
dragdrop.fire({type:"dragstart",target:dragging,x:event.clientX,y:event.clientY});
}
break;

case"mousemove":
if(dragging!==null){

//assignlocation
dragging.style.left=(event.clientX-diffX)+"px";
dragging.style.top=(event.clientY-diffY)+"px";

//firecustomevent
dragdrop.fire({type:"drag",target:dragging,x:event.clientX,y:event.clientY});
}
break;

case"mouseup":
dragdrop.fire({type:"dragend",target:dragging,x:event.clientX,y:event.clientY});
dragging=null;
break;
}
};

//publicinterface
dragdrop.enable=function(){
EventUtil.addHandler(document,"mousedown",handleEvent);
EventUtil.addHandler(document,"mousemove",handleEvent);
EventUtil.addHandler(document,"mouseup",handleEvent);
};

dragdrop.disable=function(){
EventUtil.removeHandler(document,"mousedown",handleEvent);
EventUtil.removeHandler(document,"mousemove",handleEvent);
EventUtil.removeHandler(document,"mouseup",handleEvent);
};

returndragdrop;
}();