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 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
Dec 11 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
jQuery实现伸展与合拢panel的方法
Apr 30 Javascript
微信小程序(六):列表上拉加载下拉刷新示例
Jan 13 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
浅谈React Event实现原理
Sep 20 Javascript
在antd Form表单中select设置初始值操作
Nov 02 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Javascript webpack动态import
Apr 19 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 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
调整PHP的性能
2013/10/30 PHP
PHP使用Alexa API获取网站的Alexa排名例子
2014/06/12 PHP
thinkPHP中U方法加密传递参数功能示例
2018/05/29 PHP
cookie丢失问题(认证失效) Authentication (用户验证信息)也会丢失
2009/06/04 Javascript
JavaScript.Encode手动解码技巧
2010/07/14 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jQuery实现固定在网页顶部的菜单效果代码
2015/09/02 Javascript
移动手机APP手指滑动切换图片特效附源码下载
2015/11/30 Javascript
JS实现弹出居中的模式窗口示例
2016/06/20 Javascript
JavaScript数据类型转换的注意事项
2016/07/31 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
解决vue 单文件组件中样式加载问题
2019/04/24 Javascript
Vue动态组件和异步组件原理详解
2019/05/06 Javascript
Vue Element UI + OSS实现上传文件功能
2019/07/31 Javascript
微信小程序8种数据通信的方式小结
2020/02/03 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python高级用法总结
2018/05/26 Python
Python 3.x基于Xml数据的Http请求方法
2018/12/28 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
python_matplotlib改变横坐标和纵坐标上的刻度(ticks)方式
2020/05/16 Python
如何基于Python实现word文档重新排版
2020/09/29 Python
魔幻般冒泡背景的CSS3按钮动画
2016/02/27 HTML / CSS
DERMAdoctor官网:美国著名皮肤护理品牌
2019/07/06 全球购物
Eton丹麦官网:精美的男式衬衫
2020/05/27 全球购物
远程研修随笔感言
2014/02/10 职场文书
学生周末回家住宿长期请假条
2014/02/15 职场文书
领导调研接待方案
2014/02/27 职场文书
商业融资计划书
2014/04/29 职场文书
学习委员竞选稿
2015/11/20 职场文书
财务人员廉洁自律心得体会
2016/01/13 职场文书
小学四年级作文之写景
2019/08/23 职场文书
Vue通过懒加载提升页面响应速度
2021/05/10 Vue.js
教你使用vscode 搭建react-native开发环境
2021/07/07 Javascript