闭包

什么闭包？

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

//当调用完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;
}