当前位置：
首页 >
前端技术
> javascript
>内容正文
javascript
JavaScript 闭包的详细分享（三种创建方式）（附小实例）
生活随笔
收集整理的这篇文章主要介绍了
JavaScript 闭包的详细分享（三种创建方式）（附小实例）
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
JavaScript闭包的详细理解
一、原理：闭包函数--指有权访问私有函数里面的变量和对象还有方法等；通俗的讲就是突破私有函数的作用域，让函数外面能够使用函数里面的变量及方法。
1、第一种创建方式
function test(){var x=10;return function(){return x;}}var a=test();alert(a); //弹出test函数私有变量x，结果：102、第二种创建方式
var y;function test(){var x=10;y=3;y=function(){return x;}}test(); //当调用函数之后test（）会找到一块缓存 现在test（）里放的就是 变量x 和匿名函数yalert(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" οnclick="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>
初学者理解起来闭包不是很好读懂，有问题或者意见，欢迎下面评论，我会和大家一起分享所学，欢迎交流！！！
转载于:https://www.cnblogs.com/wangweizhang/p/8328991.html
总结
以上是生活随笔为你收集整理的JavaScript 闭包的详细分享（三种创建方式）（附小实例）的全部内容，希望文章能够帮你解决所遇到的问题。
- 上一篇： wios设置证书登陆
- 下一篇： Web-Lesson07-JS的函数及作