首页 > 代码库 > 闭包

闭包

什么闭包?

函数嵌套函数,函数嵌套函数,内部函数可以使用外部函数的参数和变量,参数和变量不会被垃圾回收机制回收

//当调用完aaa()函数,变量a被垃圾回收机制回收了

function aaa() {
    var a = 1;
}

aaa();



//闭包的形式:

function aaa() {
   var a = 1;
   function bbb(){
       alert(a);
   }
   return bbb;
}

var c = aaa();   // c为返回的bbb的函数

c();  // 调用bbb()函数,因为这里用到了aaa()中的a变量,因此a变量常驻在内存中

 

闭包的好处:

1、希望一个变量长期驻扎在内存中

2、避免全局变量的污染

3、私有成员的存在

闭包的用处:

1、模块化代码

//全局变量 

var a  = 1;
function aaa(){
   a++;
   alert(a);
}

aaa();  //2
aaa();  //3



//变成局部变量,改写如下:

function aaa() {
   var a = 1;
    return function() {
       a++;
       alert(a);
    }
}

b = aaa();
b(); //2
b(); //3


//将函数声明变成函数表达式

var aaa = (function(){
    var a = 1;
    return function(){
        a++;
        alert(a):
    }
})();
aaa(); //2
aaa(); //3


//继续改进,将里面的函数也变成私有的
var aaa = (function(){
     var a = 1;
     function bbb(){
           a++;
           alert(a);
     }
     return bbb;
})()

aaa();//2
aaa();//3


// 里面包括多个函数,return时就json的形式

var aaa = (function(){
     var a = 1;
     function bbb(){
        a++;
        alert(‘bbb的内容:‘+a);
     }
    function ccc(){
       a++;
       alert(‘ccc的内容:‘+a);
    }
    return {
       b : bbb,
       c : ccc
    } 
})();

aaa.b(); //bbb的内容:2
aaa.c(); //ccc的内容:3

 2、在循环中直接找到元素的索引

for (var i=0;i<aLi.length;i++){
    aLi[i].onclick = function(){
          alert(i);    //无论点击哪一个都是3,因为当点击的时候已经循环完了
    }
}


//改写如下:
//方法一:
for (var i=0;i<aLi.length;i++){
     (function(i){
           aLi.onclick = function(){
                 alert(i);
           }
     })(i);
}


//方法二:
for (var i=0;i<aLi.length;i++){
        aLi.onclick = (function(i){
              return function(){
                   alert(i);
              }
        })(i);
}

闭包需要注意的地方?

在IE下会引会内存泄漏

window.onload = function(){
     var oDiv = document.getElementById(‘div1‘);

     oDiv.onclick = function(){
          alert(oDiv.id);
     };
}


//改进
//方法一:
window.onload  = function(){
      var oDiv = document.getElementById(‘div1‘);
      oDiv.onclick = function(){
             alert(oDiv.id);
     }
     window.unload = function(){
           oDiv.onclick = null;
     }
}

//方法二:

window.onload = function(){
      var oDiv = document.getElementById(‘div1‘);
      var id = oDiv.id;
      oDiv.onclick = function(){
           alert(id);
      };
     oDiv = null;
}