javascript闭包功能与用法实例分析
本文实例讲述了javascript闭包功能与用法。分享给大家供大家参考,具体如下:
理解闭包
闭包这个东西,确实是很麻烦。之前我自己的理解也是有一点误差,所以今天将文章修改修改,争取将自己的理解进一步准确化。
闭包说得通熟易懂一点,就是指有权访问另一个函数作用域的变量的函数。创建闭包的常见方式,就是在一个函数内部创建另外一个函数,并返回。
我们这里举一个例子来说明,首先我们在函数f1内部定义一个函数f2。
function f1(){ var n=999; function f2(){ alert(n); // 999 } }
f2可以访问f1的作用域,反过来就不行了。现在我们想访问f1中的n,在外层却访问不到,怎么办呢?将f2作为f1的返回值就可以了:
function f1(){ var n=999; function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999
这个就是闭包。
其实也很简单,那么闭包有什么用呢?
闭包的使用
之前的自己只知道闭包的概念,却并不知道其存在的价值和意义。直到自己在项目中遇到类似的问题后,才发现只有闭包才能解决的情况。
闭包是使用可以带来以下好处:
1. 希望一个变量长期驻扎在内存中
2. 避免全局变量的污染
3. 私有成员的存在
我们刚才说到过,闭包可以读取到函数内部的变量,这是由于闭包后函数的堆栈不会释放,也就是说这些值始终保持在内存中。这是一个优点,也是一个缺点。
我们可以通过闭包来实现一个计数器,而不用担心全局变量的污染:
function f1(){ var n=999; nAdd=function(){n+=1} function f2(){ alert(n); } return f2; } var result=f1(); result(); // 999 nAdd(); result(); // 1000
可以看到n一直存储在内存中,并没有在f1调用后被自动清除。
我们再来看看如何通过闭包来模拟JavaScript中的私有成员:
var aaa = (function(){ var a = 1; function bbb(){ a++; alert(a); } function ccc(){ a++; alert(a); } return { b:bbb, //json结构 c:ccc } })(); aaa.b(); //2 aaa.c(); //3
这样就可以提供指定的变量供外界访问了。
闭包解决的问题
这是一个很常见的问题,就是利用javascript处理循环的时候,索引i的值不能有效的利用:
这里改成如下格式,形成10个闭包来解决即可:
更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
- 通俗易懂地解释JS中的闭包
- JS继承与闭包及JS实现继承的三种方式
- 浅谈JavaScript作用域和闭包
- JS闭包的几种常见形式实例详解
- JS实现闭包中的沙箱模式示例
- JavaScript闭包的简单应用
- 通过示例彻底搞懂js闭包
- JavaScript闭包和回调详解
- 浅谈JS封闭函数、闭包、内置对象
- JavaScript闭包_动力节点Java学院整理
- 深入理解Javascript中的作用域链和闭包
- JS闭包可被利用的常见场景小结
- 利用js的闭包原理做对象封装及调用方法
- JavaScript中闭包的详解
- JS闭包用法实例分析
- 图解Javascript——作用域、作用域链、闭包
- 轻松理解JavaScript闭包
- js中的闭包学习心得
相关文章
javascript延时重复执行函数 lLoopRun.js
javascript延时重复执行函数 lLoopRun.js...2007-06-06解决select2在bootstrap modal中不能正常使用的问题
今天小编就为大家分享一篇解决select2在bootstrap modal中不能正常使用的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08webpack教程之webpack.config.js配置文件
本篇文章主要介绍了webpack教程之webpack.config.js配置文件 ,具有一定的参考价值,有兴趣的可以了解一席2017-07-07基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
这篇文章主要介绍了基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js的源码和使用方法,并附上一个使用ImageView.js的实例,这里分享给大家,有需要的小伙伴参考下。2015-03-03
最新评论