1、什么是闭包?

 

 

2、闭包的优点?应用在哪里?

 

3、使用闭包需要注意什么?

 

 

1.什么是闭包?

 

 

简单的说,就是函数嵌套函数,

 

内部函数可以引用外部函数的参数和变量

 

 

参数和变量不会被垃圾回收机制所回收

 

Eg: 

 

 

function aaa( ){

 

var a=5;

 

 

function bbb( ){

 

console.log( a );

 

 

}

 

return bbb;

 

 

}

 

var c=aaa();

 

 

c();//5

 

 

 

2、闭包的优点?

 

(1)希望或者说可以使一个变量长期驻扎在内存当中

 

 

(2)避免全局污染

 

首页看一个全局变量的例子:

 

 

eg:

 

var a=1;

 

 

 function aaa(){

 

a++;

 

 

console.log(a);

 

}

 

 

aaa();//2

 

aaa();//3

 

 

然后把这个变量变成局部变量来看一下:

 

function aaa(){

 

 

 var a=1;

 

a++;

 

 

console.log(a);

 

}

 

 

aaa();//2

 

aaa();//2

 

 

接下来咱们改成闭包:

 

 

function aaa() {

 

var a=1;

 

 

return function(){

 

a++;

 

 

console.log( a );

 

}

 

 

}

 

var b=aaa();

 

 

b();//2

 

b();//3

 

 

还可以这样写:

 

var aaa=( function( ) {

 

 

var a=1;

 

 return function(){

 

 

a++;

 

console.log(a);

 

 

}

 

} ) ( );

 

 

aaa();//2

 

aaa();//3

 

 

那闭包用在哪里呢?看下面例子

 

 

(1)模块化代码

 

var aaa=( function(){

 

 

var a=1;

 

function bbb() {

 

 

a++;

 

console.log( a );

 

 

}

 

function ccc() {

 

 

a++;

 

console.log( a );

 

 

 }

 

return {

 

 

b:bbb,

 

c:ccc

 

 

}

 

} )( );

 

 

aaa.b();//2

 

aaa.c();//3

 

 

aaa.ccc();//报错

 

 

继续往下看:

 

 

(2)在循环中直接找到对应元素的索引

 

eg: <ul>

 

 

<li>11</li>

 

<li>11</li>

 

 

<li>11</li>

 

</ul>

 

 

window.onload=function() {

 

var aLi=document.getElementsByTagName( li );

 

 

for( var i=0; i< aLi.length; i++){

 

aLi [ i ].onclick=function(){

 

 

alert(i);//连续弹出三次3

 

}

 

 

}

 

}

 

 

 

上面没有达到闭包效果,那么怎么改写呢?看下面

 

 

 

 

window.onload=function() {

 

var aLi=document.getElementsByTagName( ‘li’ );

 

 

for( var i=0; i< aLi.length; i++){

 

( function( i){

 

 

aLi [ i ].onclick=function( ){

 

alert(i);//连续弹出三次,分别0 1 2

 

 

}

 

} )( i );

 

 

}

 

}

 

 

还可以这样改写:

 

window.onload=function() {

 

 

var aLi=document.getElementsByTagName( ‘li’ );

 

for( var i=0; i< aLi.length; i++){

 

 

aLi [ i ].onclick=(function( i ){

 

return function(){

 

 

alert(i);//连续弹出三次,分别0 1 2

 

}

 

 

})( i );

 

 

 

}

 

3、闭包注意的地方?继续往下看

 

 

在IE浏览器会出现或引起内存泄露,如何解决?

 

eg:

 

 

<div id=” d1”> 555</div>

 

window.onload=function () {

 

 

var oDiv=document.getElementById(‘d1’);

 

oDiv.onclick=function(){ //变量引用内部函数

 

 

alert(oDiv.id); //内部函数引用外部对象

 

}

 

 

//这时候就会出现内存泄露,应该这样解决

 

window.onunload=function(){

 

 

oDiv.omclick=null;

 

}

 

 

}

 

还可以这样解决:

 

 

window.onload=function () {

 

var oDiv=document.getElementById(‘d1’);

 

 

var id=oDiv.id;

 

oDiv.onclick=function(){ 

 

 

alert(id); 

 

}

 

 

oDiv=null;

 

}

 

 

}

posted on 2016-06-27 17:54  菲比寻常  阅读(249)  评论(0编辑  收藏  举报