JavaScript闭包的详细理解
一、原理：闭包函数--指有权访问私有函数里面的变量和对象还有方法等；通俗的讲就是突破私有函数的作用域，让函数外面能够使用函数里面的变量及方法。
1、第一种创建方式
function test(){
var x=10;
return function(){
return x;
}
}
var a=test();
alert(a); //弹出test函数私有变量x，结果：10
2、第二种创建方式
var y;
function test(){
var x=10;
y=3;
y=function(){
return x;
}
} test(); //当调用函数之后test（）会找到一块缓存 现在test（）里放的就是 变量x 和匿名函数y
alert(y());
3、第三种创建方式
function test(){
var x=2;
var y=function(){
return x;
}
x++;
return y;
}
var a=test();
alert(a()); //弹出三
读到第三种创建方法，有的朋友说了，明明在y的函数体已经返回了x变量，输出的为什么是3不是2.
注意：朋友们，y匿名函数只是在当前函数块创建，但是并未执行。函数顺序执行X++后，return y；在此才执行，++过后必然是3而不是2.
实例：
a、闭包实现迭代器。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>闭包实现迭代器</title>
<script type="text/javascript">
function test(array){
/*这里用的是index++ 当第一次调用的时候作用域于test的index定义为0
而在array[index++]这句话 是先把index的索引赋值给这个数组 然后在进行自加1
所以我们调用第一次的时候输出的index=0的王维璋 第二次输出index=1的孙家营...
*/
var index=0;
return function(){
return array[index++];
}
}
var a=test(['王维璋','孙家营','王帅']);
for(var i = 0; i<3; i++){
console.log(a());
}
//因为数组传递的参数只有三个 所以在此array里面只有三个数据 当遍历迭代到第四个数据的时候返回的是undefined
</script>
</head>
<body> </body>
</html>
b、闭包实现点击增加p标记
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>闭包实现迭代增加标记</title>
<style >
div{height:500px; background:#000; color:#fff; text-align:center;}
p{color:#fff;background:#f00;height:30px;}
</style>
</head> <body> <input type="button" name="but" value="创建p在div里" id="but" onclick="a()">
<div id="box-div">
<p>我是p1</p>
</div> <script type="text/javascript">
function test(){
var div=document.getElementById("box-div");
return function(){
var p=document.createElement("p");
return div.appendChild(p);
}
}
var a=test();
</script> </body>
</html>
初学者理解起来闭包不是很好读懂，有问题或者意见，欢迎下面评论，我会和大家一起分享所学，欢迎交流！！！