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 相关文章推荐
JavaScript动态插入script的基本思路及实现函数
Nov 11 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
原生js编写autoComplete插件
Apr 13 Javascript
js验证框架之RealyEasy验证详解
Jun 08 Javascript
AngularJS中比较两个数组是否相同
Aug 24 Javascript
在Web项目中引入Jquery插件报错的完美解决方案(图解)
Sep 19 Javascript
js 判断登录界面的账号密码是否为空
Feb 08 Javascript
jQuery鼠标悬停内容动画切换效果
Apr 27 jQuery
BootStrap daterangepicker 双日历控件
Jun 02 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
Jul 03 Javascript
AngularJs ng-change事件/指令的用法小结
Nov 01 Javascript
使用JS模拟锚点跳转的实例
Feb 01 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
Body是什么,该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
如何使用php绘制在图片上的正余弦曲线
2013/06/08 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
Laravel 5框架学习之模型、控制器、视图基础流程
2015/04/08 PHP
PHP设计模式之 策略模式Strategy详解【对象行为型】
2020/05/01 PHP
js操作ajax返回的json的注意问题!
2010/02/23 Javascript
javascript 循环读取JSON数据的代码
2010/07/17 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
js函数排序的实例代码
2013/07/01 Javascript
js浏览器本地存储store.js介绍及应用
2014/05/13 Javascript
jQuery中ajax的get()方法用法实例
2014/12/26 Javascript
jQuery删除一个元素后淡出效果展示删除过程的方法
2015/03/18 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
详解angular ui-grid之过滤器设置
2017/06/07 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
jquery 通过ajax请求获取后台数据显示在表格上的方法
2018/08/08 jQuery
使用Angular 6创建各种动画效果的方法
2018/10/10 Javascript
Vue使用watch监听一个对象中的属性的实现方法
2019/05/10 Javascript
基于vue 实现表单中password输入的显示与隐藏功能
2019/07/19 Javascript
解决LayUI加上form.render()下拉框和单选以及复选框不出来的问题
2019/09/27 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
如何将Node.js中的回调转换为Promise
2020/11/10 Javascript
使用Python中的cookielib模拟登录网站
2015/04/09 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
python编写简易聊天室实现局域网内聊天功能
2018/07/28 Python
对Python中Iterator和Iterable的区别详解
2018/10/18 Python
Python 中Django安装和使用教程详解
2019/07/03 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
css sprite简单实例
2016/05/23 HTML / CSS
考试违纪检讨书
2014/02/02 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
教师工作决心书
2015/02/04 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书