javascript闭包功能与用法实例分析


Posted in Javascript onApril 06, 2017

本文实例讲述了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的值不能有效的利用:

javascript闭包功能与用法实例分析

这里改成如下格式,形成10个闭包来解决即可:

javascript闭包功能与用法实例分析

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
WEB页子窗口(showModalDialog和showModelessDialog)使用说明
Oct 25 Javascript
jquery键盘事件介绍
Jan 31 Javascript
JavaScript中的this实例分析
Apr 28 Javascript
jQuery :nth-child前有无空格的区别分析
Jul 11 Javascript
js模拟hashtable的简单实例
Mar 06 Javascript
JavaScript动态改变div属性的实现方法
Jul 22 Javascript
jQuery实现仿QQ空间装扮预览图片的鼠标提示效果代码
Oct 30 Javascript
jquery radio 动态控制选中失效问题的解决方法
Feb 28 jQuery
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 Javascript
浅谈layui分页控件field参数接收对象的问题
Sep 20 Javascript
Vue触发input选取文件点击事件操作
Aug 07 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 #Javascript
ES6中module模块化开发实例浅析
Apr 06 #Javascript
ES6中class类用法实例浅析
Apr 06 #Javascript
ES6中Proxy代理用法实例浅析
Apr 06 #Javascript
ES6中Symbol类型用法实例详解
Apr 06 #Javascript
vue中mint-ui环境搭建详细介绍
Apr 06 #Javascript
B/S(Web)实时通讯解决方案分享
Apr 06 #Javascript
You might like
Php图像处理类代码分享
2012/01/19 PHP
PHP开发者常犯的10个MySQL错误更正剖析
2012/01/30 PHP
php函数实现判断是否移动端访问
2015/03/03 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
PHP房贷计算器实例代码,等额本息,等额本金
2017/04/01 PHP
jQuery的强大选择器小结
2009/12/27 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
addEventListener()第三个参数useCapture (Boolean)详细解析
2013/11/07 Javascript
jQuery中prependTo()方法用法实例
2015/01/08 Javascript
React.js入门学习第一篇
2016/03/30 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
jQuery基础知识点总结(必看)
2016/05/31 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
jQuery插件zTree实现的基本树与节点获取操作示例
2017/03/08 Javascript
angularJS1 url中携带参数的获取方法
2018/10/09 Javascript
使用wxapp-img-loader自定义组件实现微信小程序图片预加载功能
2018/10/18 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
Electron 调用命令行(cmd)
2019/09/23 Javascript
jQuery+css实现的点击图片放大缩小预览功能示例【图片预览 查看大图】
2020/05/29 jQuery
JS中作用域以及变量范围分析
2020/07/18 Javascript
python下读取公私钥做加解密实例详解
2017/03/29 Python
1分钟快速生成用于网页内容提取的xslt
2018/02/23 Python
python调用摄像头显示图像的实例
2018/08/03 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
scrapy头部修改的方法详解
2020/12/06 Python
css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果
2021/01/27 HTML / CSS
美国高端寝具品牌:Coyuchi
2017/02/08 全球购物
C#实现对任一张表的数据进行增,删,改,查要求,运用Webservice,体现出三层架构
2014/07/11 面试题
探矿工程师自荐信
2014/01/24 职场文书
中学教师请假制度
2014/02/03 职场文书
世界遗产的导游词
2015/02/13 职场文书