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 select(列表)的操作(取值/赋值)
Aug 06 Javascript
IE6下focus与blur错乱的解决方案
Jul 31 Javascript
JavaScript与DOM组合动态创建表格实例
Dec 23 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
js 获取页面高度和宽度兼容 ie firefox chrome等
May 14 Javascript
javascript 解决浏览器不支持的问题
Sep 24 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
微信小程序引用公共js里的方法的实例详解
Aug 17 Javascript
从源码看angular/material2 中 dialog模块的实现方法
Oct 18 Javascript
JS 实现微信扫一扫功能
Sep 14 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 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
星际初学者游戏中永远要做的事
2020/03/04 星际争霸
php max_execution_time执行时间问题
2011/07/17 PHP
php中的explode()函数实例介绍
2019/01/18 PHP
Laravel如何自定义command命令浅析
2019/03/23 PHP
How to Auto Include a Javascript File
2007/02/02 Javascript
js直接编辑当前cookie的脚本
2008/09/14 Javascript
javascript 写类方式之二
2009/07/05 Javascript
JS小框架 fly javascript framework
2009/11/26 Javascript
jQuery 表格工具集
2010/04/25 Javascript
基于jquery的loading效果实现代码
2010/11/05 Javascript
jQuery之网页换肤实现代码
2011/04/30 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
jQuery实现购物车多物品数量的加减+总价计算
2014/06/06 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
2015/10/27 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
jQuery DOM节点的遍历方法小结
2017/08/15 jQuery
vue技术分享之你可能不知道的7个秘密
2018/04/09 Javascript
浅析vue插槽和作用域插槽的理解
2019/04/22 Javascript
详解微信小程序-canvas绘制文字实现自动换行
2019/04/26 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
微信小程序通过js实现瀑布流布局详解
2019/08/28 Javascript
[04:29]DOTA2亚洲邀请赛小组赛第一日 TOP10精彩集锦
2015/02/01 DOTA
[16:21]教你分分钟做大人:圣堂刺客
2014/12/03 DOTA
Flask框架学习笔记(一)安装篇(windows安装与centos安装)
2014/06/25 Python
在服务器端实现无间断部署Python应用的教程
2015/04/16 Python
Python内置数据结构与操作符的练习题集锦
2016/07/01 Python
Python实现的网页截图功能【PyQt4与selenium组件】
2018/07/12 Python
django从请求到响应的过程深入讲解
2018/08/01 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
HTML5触摸事件演化tap事件介绍
2016/03/25 HTML / CSS
2015学校图书管理员工作总结
2015/05/11 职场文书
高三化学教学反思
2016/02/22 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
《模拟人生4》推出新补丁 “婚礼奇缘”DLC终于得到修复
2022/04/03 其他游戏