JavaScript 闭包的详细分享(三种创建方式)(附小实例)

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>

初学者理解起来闭包不是很好读懂,有问题或者意见,欢迎下面评论,我会和大家一起分享所学,欢迎交流!!!

上一篇:Javascript对象的几种创建方式


下一篇:精读JavaScript模式(四),数组,对象与函数的几种创建方式