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 相关文章推荐
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
checkbox勾选判断代码分析
Jun 11 Javascript
使用ajaxfileupload.js实现ajax上传文件php版
Jun 26 Javascript
鼠标悬停小图标显示大图标
Jan 22 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(放大缩小)
Dec 02 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
Dec 20 Javascript
js实现简单的计算器功能
Jan 16 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
Mar 11 Javascript
浅谈mvvm-simple双向绑定简单实现
Apr 18 Javascript
详解小程序原生使用ES7 async/await语法
Aug 06 Javascript
vue 项目中使用Loading组件的示例代码
Aug 31 Javascript
小程序怎样让wx.navigateBack更好用的方法实现
Nov 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
IIS环境下快速安装、配置和调试PHP5.2.0
2006/12/17 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
JavaScript学习笔记(二) js对象
2011/10/25 Javascript
javascript模拟实现C# String.format函数功能代码
2013/11/25 Javascript
基于jQuery的图片不完全按比例自动缩小
2014/07/11 Javascript
js实现右键自定义菜单
2016/12/03 Javascript
BootstrapValidator超详细教程(推荐)
2016/12/07 Javascript
JavaScript和JQuery获取DIV值的方法示例
2017/03/07 Javascript
最全的JavaScript开发工具列表 总有一款适合你
2017/06/29 Javascript
解决Vue 项目打包后favicon无法正常显示的问题
2018/09/01 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
nodejs制作小爬虫功能示例
2020/02/24 NodeJs
js实现带箭头的进度流程
2020/03/26 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
JS实现点击掉落特效
2021/01/29 Javascript
wxpython学习笔记(推荐查看)
2014/06/09 Python
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python功能键的读取方法
2015/05/28 Python
pandas值替换方法
2018/07/10 Python
python K近邻算法的kd树实现
2018/09/06 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
Python爬虫requests库多种用法实例
2020/05/28 Python
详解利用canvas实现环形进度条的方法
2019/06/12 HTML / CSS
Tod’s英国官方网站:意大利奢华手工制作手袋和鞋履
2019/03/15 全球购物
Myprotein西班牙官网:欧洲第一大运动营养品牌
2020/02/24 全球购物
白酒市场开发计划书
2014/01/09 职场文书
爱护草坪标语
2014/06/24 职场文书
无财产离婚协议书范本
2014/10/28 职场文书
爱的教育读书笔记
2015/06/26 职场文书
2016同学毕业寄语大全
2015/12/04 职场文书
在校大学生才艺比赛策划书怎么写?
2019/08/26 职场文书
2019年共青团工作条例最新版
2019/11/12 职场文书