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中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
Feb 07 Javascript
再谈JavaScript异步编程
Jan 27 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
Javascript数组Array基础介绍
Mar 13 Javascript
Node.js常用工具之util模块
Mar 09 Javascript
ReactJs设置css样式的方法
Jun 08 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
基于Vue 2.0的模块化前端 UI 组件库小结
Dec 21 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 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 星际争霸
Window 7/XP 安装Apache 2.4与PHP 5.4 的过程详解
2013/06/02 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
简单的代码实现jquery定时器
2014/01/03 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
jQuery中hover方法和toggle方法使用指南
2015/02/27 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
JavaScript实现定时页面跳转功能示例
2017/02/14 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
jQuery实现百度登录框的动态切换效果
2017/04/21 jQuery
详解webpack 配合babel 将es6转成es5 超简单实例
2017/05/02 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
深入理解Vue2.x的虚拟DOM diff原理
2017/09/27 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
vue-i18n实现中英文切换的方法
2020/07/06 Javascript
js面试题之异步问题的深入理解
2020/09/20 Javascript
[48:27]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python中无限元素列表的实现方法
2014/08/18 Python
Python XML RPC服务器端和客户端实例
2014/11/22 Python
Python httplib模块使用实例
2015/04/11 Python
如何将python中的List转化成dictionary
2016/08/15 Python
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
Python Numpy库安装与基本操作示例
2019/01/08 Python
基于django channel实现websocket的聊天室的方法示例
2019/04/11 Python
python 日志模块logging的使用场景及示例
2021/01/04 Python
animation和transition的区别
2020/10/12 HTML / CSS
Daisy London官网:英国最大的首饰集团IBB旗下
2019/02/28 全球购物
Wiggle澳大利亚:自行车、跑步、游泳商店
2020/11/07 全球购物
环境科学专业大学生自荐信格式
2013/09/21 职场文书
园林施工员岗位职责
2013/12/11 职场文书
上班迟到检讨书
2014/01/10 职场文书
十佳护士先进事迹
2014/05/08 职场文书
十佳少年事迹材料
2014/12/25 职场文书
继续教育个人总结
2015/03/03 职场文书
出国留学单位推荐信
2015/03/26 职场文书