闭包
相关链接： http://blog.csdn.net/u011411356/article/details/50208433；
然后,
- var result=[];
- function foo(){
- var i= 0;
- for (;i<3;i=i+1){
- result[i]=function(){
- alert(i)
- }
- }
- };
- foo();
- result[0](); // 3
- result[1](); // 3
- result[2](); // 3
这段代码中,程序员希望foo函数中的变量i被内部循环的函数使用,并且能分别获得他们的索引,而实际上,只能获得该变量最后保留的值,也就是说.闭包中所记录的自由变量,只是对这个变量的一个引用,而非变量的值,当这个变量被改变了,闭包里获取到的变量值,也会被改变.
解决的方法之一,是让内部函数在循环创建的时候立即执行,并且捕捉当前的索引值,然后记录在自己的一个本地变量里.然后利用返回函数的方法,重写内部函数,让下一次调用的时候,返回本地变量的值,改进后的代码:
- 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
如图所示，确实有了闭包，但是里面都是3：
今日用闭包意外发现，闭包比不是闭包多了个
闭包图，
| closure | 英[ˈkləʊʒə(r)] | 美[ˈkloʊʒə(r)] |
| n. | 结束; （永久的） 停业，关闭; [电] 闭合; [数] 闭包; |
| vt. | 使结束，使终止; 使停止辩论;
|
通过添加属性的图
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>innerHTML</h3>
<div id="div1">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h3>点的是第几个</h3>
<div id="div2">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h3>闭包实现点的是第几个,内存泄漏未回收</h3>
<div id="div3">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<h3>闭包实现点的是第几个2,内存泄漏未回收</h3>
<div id="div4">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
<script type="text/javascript">
//伪数组不能添加点击事件，必须是单个dom对象才能添加点击事件。
var div1 = document.getElementById("div1");
var oLi = div1.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
oLi[i].onclick=function() {
alert(this.innerHTML);
}
}
var div2 = document.getElementById("div2");
var oLi = div2.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
oLi[i].index=i;
oLi[i].onclick=function() {
alert(this.index);
}
}
console.log(oLi)
var div3 = document.getElementById("div3");
var oLi = div3.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
oLi[i].onclick=(function(i){
return function(){
alert(i);
}
})(i)
}
console.log(oLi)
var div4 = document.getElementById("div4");
var oLi = div4.getElementsByTagName('li');
for (var i = oLi.length - 1; i >= 0; i--) {
(function(i){
oLi[i].onclick=function(){
alert(i)
}
})(i)
}
</script>
</body>
</html>
