js闭包

浏览数：36 / 时间：2015年06月09日

闭包的概念一直很模糊，闭包究竟是什么呢？

//函数嵌套函数,内部函数可以引用外部函数的参数变量,参数和变量不会被垃圾回收机制收回，因为内部函数bbb()引用aaa()的变量
function aaa(a){
   var b = 5;
   function bbb(){
         alert(a);
         alert(b)
}

}

aaa();
//js中的垃圾回收机制

function aaa(){

   var a = 1;

}
  aaa();

//简单的闭包例子。判定a没有被垃圾回收机制收回
function aaa(){
    var a = 5;
    function bbb(){
        alert(a)
  }

//定义一个全局变量a,实现累加功能

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




//定义一个私有变量a,不能实现累加

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





//闭包的好处，即使a不是全局变量也能实现累加

function aaa(){
    var a = 1;
    return function(){
         a++;
         alert(a)
  }
}
var c = aaa();
c();//2
c();//3
alert(a)//报错找不到



//函数声明和函数调用
function aaa(){
  alert(a)
}
aaa();

//函数表达式
(function aaa(){
alert(1)
})()





//改写闭包,模块化代码，减小全局变量的污染

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

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


//私有成员的存在
var aaa = (function(){
   var a = 1;//局部变量
   //bbb(),ccc()私有方法
   function bbb(){
      a++;
      alert(a)
  }
   function ccc(){
     a++;
     alert(a);
  }
  return {
    b:bbb,
    c:ccc
}
})();
aaa.b();//2
aaa.c();//3
alert(a);//报错
alert(bbb);//报错
alert(ccc);//报错

//在循环中找到对应元素的索引
<script>
  var aLi = document.getElementByTagName(‘li‘);
//方法1
  for(var i = 0 ; i<aLi.lenght; i++){
       (function(i){
           aLi[i].onClick = function(){
            alert(i);
    }
       })(i)
  }

//方法2
for(var i = 0 ; i<aLi.lenght; i++){
           aLi[i].onClick = （function(i){
            return function(){
                alert(i);
       }
    })(i)
  }
   
  
</script>

<body>
<ul>
<li>111111</li>
<li>111111</li>
<li>111111</li>
</ul>
</body>

return bbb;
} 

var c=aaa();
c()

<script>
//IE下引发内存泄露
var oDiv = docudment.getElementById(‘div1‘);
oDiv.onClick = function(){
  oDiv.onClick = function(){
    alert(oDiv.id);
 };
//解决方法一
  window.onunload =  function(){
     oDiv.onClick = null;
  }
}
</script>
<script>
//IE下引发内存泄露
var oDiv = docudment.getElementById(‘div1‘);
oDiv.onClick = function(){
var oDiv = oDiv.id;
  oDiv.onClick = function(){
    alert(oDiv);
 };
//解决方法二
   oDiv = null;
}
</script>
<body>
<div id="div1">aaa</div>
</body>