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 相关文章推荐
查找Oracle高消耗语句的方法
Mar 22 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
bootstrap手风琴制作方法详解
Jan 11 Javascript
js实现用户输入的小写字母自动转大写字母的方法
Jan 21 Javascript
JS中SetTimeout和SetInterval使用初探
Mar 23 Javascript
Node接收电子邮件的实例代码
Jul 21 Javascript
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
Apr 26 jQuery
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 Javascript
使用xampp将angular项目运行在web服务器的教程
Sep 16 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
Aug 13 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出现Cannot modify header information问题的解决方法大全
2008/04/09 PHP
PHP连接MYSQL数据库实例代码
2016/01/20 PHP
thinkPHP实现的省市区三级联动功能示例
2017/05/05 PHP
Laravel框架使用Redis的方法详解
2018/05/30 PHP
php支付宝APP支付功能
2020/07/29 PHP
jQuery编写widget的一些技巧分享
2010/10/28 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jquery常用特效方法使用示例
2014/04/25 Javascript
30分钟快速掌握Bootstrap框架
2016/05/24 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
微信小程序 侧滑删除(左滑删除)
2017/05/23 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
2017/05/25 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
2017/05/26 Javascript
angular框架实现全选与单选chekbox的自定义
2017/07/06 Javascript
JS实现提交表单前的数字及邮箱校检功能
2017/11/13 Javascript
利用nodeJs anywhere搭建本地服务器环境的方法
2018/05/12 NodeJs
手把手教你实现 Promise的使用方法
2020/09/02 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[01:37]PWL S2开团时刻DAY1&2——这符有毒
2020/11/20 DOTA
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
Python使用爬虫猜密码
2016/02/19 Python
python3中的md5加密实例
2018/05/29 Python
使用darknet框架的imagenet数据分类预训练操作
2020/07/07 Python
python os.rename实例用法详解
2020/12/06 Python
html5使用canvas实现图片下载功能的示例代码
2017/08/26 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
2020/08/21 HTML / CSS
Smashbox官网:美国知名彩妆品牌
2017/01/05 全球购物
英国乐购杂货:Tesco Groceries
2018/11/29 全球购物
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
授权委托书格式范文
2014/08/02 职场文书
党员群众路线整改措施及今后努力方向
2014/10/28 职场文书
校本培训个人总结
2015/02/28 职场文书
土建技术员岗位职责
2015/04/11 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery
postgres之jsonb属性的使用操作
2021/06/23 PostgreSQL