JS闭包

    闭包是指有权访问另一个函数作用域中的变量的函数。

    这里随意写个最简单的小例子：

//这是闭包的一个基本例子

function outter( ){
    
    var temp = 0; //不加var则是全局变量！

    function inner( ){
  
        return ++temp; //1、使用另一个（外部）函数变量

    }

    return inner; //2、返回对内部函数的引用
}

var test = outter()(); //3、调用函数

console.log(test);//输出：1

    为神马可以取到函数的局部变量呢？

    首先说说js的内存回收机制：函数执行时，其定义的变量会在内存空间中保存，等函数执行完毕，变量销毁内存释放。但是如果这个函数内部又嵌套了另一个函数呢？自动把函数和他可能使用的变量(包括本地变量和父级和祖先级函数的变量(自由变量))一起保存起来.也就是构建一个闭包,这些变量将不会被内存回收器所回收,只有当内部的函数不可能被调用以后(例如被删除了,或者没有了指针),才会销毁这个闭包,而没有任何一个闭包引用的变量才会被下一次内存回收启动时所回收.

   下面说说需要注意的几种情况:

    情况1：请看例子 

/*这是http://www.cnblogs.com/mzwr1982/archive/2012/05/20/2509295.html 的例子，本人太懒，借用下，嘿嘿~
*/
var result=[];

function foo(){
    var i= 0;

    for (;i<3;i=i+1){
//亮点来了，这里面的i，其实是外层循环i的引用
        result[i]=function(){
            alert(i)
        }
    }
};

foo();
result[0](); // 3
result[1](); // 3
result[2](); // 3

//正确的写法如下
var result=[];

function foo(){
    var i= 0;
    for (;i<3;i=i+1){
        result[i]=(function(j){
            return function(){
                alert(j);
            };
        })(i);
    }
};

foo();
result[0](); // 0
result[1](); // 1
result[2](); // 2

 

    同样的例子还有：    

window.onload = function ()

{

    var oLi = document.getElementsByTagName("li");

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

    {

        oLi[i].index = i;

        oLi[i].onclick = function() {

            console.log(oLi[i].index);//直接用i不行的哦~

        };

    }    

}

    情况二：

var name = "The Window";

var object = {
      name : "My Object",

      getNameFunc : function(){

            var that = this;  //匿名函数的this是全局变量，so...

            return function(){
        
                return that.name;//这里如果用this.name 其实是The Window，现在则是我们期望的My Object

            };
      }
};

   情况三（也称内存泄露）：

   如果闭包的作用域链中包含一个HTML元素，则该元素无法被销毁，如：

function example(){
     var ele = document.getElementById("someElement");

     ele.onclick = function(){
         
          console.log(ele.id);//无法释放
     }
};

   改进代码如下：  

function example(){
     var ele = document.getElementById('someELement');
     var id = ele.id;
     
     ele.onclick = function(){
         console.log(id);
     };

     ele = null;
};