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实现的论坛常用的运行代码的效果
Jul 15 Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 Javascript
Jquery 数据选择插件Pickerbox使用介绍
Aug 24 Javascript
Javascript无阻塞加载具体方式
Jun 28 Javascript
js函数调用的方式
May 06 Javascript
jquery mobile 移动web(5)
Dec 20 Javascript
AngularJS 指令的交互详解及实例代码
Sep 14 Javascript
js拖拽功能实现代码解析
Nov 28 Javascript
jQuery实现遍历XML节点和属性的方法示例
Apr 29 jQuery
vue路由--网站导航功能详解
Mar 29 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
Jun 23 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 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编写的简单页面跳转功能实现代码
2013/11/27 PHP
LINUX下PHP程序实现WORD文件转化为PDF文件的方法
2016/05/13 PHP
Yii CDBCriteria常用方法实例小结
2017/01/19 PHP
Laravel向公共模板赋值方法总结
2019/06/25 PHP
php设计模式之观察者模式实例详解【星际争霸游戏案例】
2020/03/30 PHP
JS 无法通过W3C验证的处理方法
2010/03/09 Javascript
JQuery EasyUI 对话框的使用方法
2010/10/24 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
一个简单的瀑布流效果(主体形式自写)
2013/05/27 Javascript
JSP跨iframe如何传递参数实现代码
2013/09/21 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
详解JavaScript中的every()方法
2015/06/08 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
轻松实现javascript数据双向绑定
2015/11/11 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
2016/06/02 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
微信小程序实现验证码获取倒计时效果
2018/02/08 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
Node.js 使用request模块下载文件的实例
2018/09/05 Javascript
vue移动端弹框组件的实例
2018/09/25 Javascript
JavaScript 替换所有匹配内容及正则替换方法
2020/02/12 Javascript
[04:26]2014DOTA2国际邀请赛-Newbee顺利进入胜者组决赛 独家专访战神7
2014/07/19 DOTA
[02:09]EHOME夺得首届辉夜杯冠军—现场颁奖仪式
2015/12/28 DOTA
Python解释执行原理分析
2014/08/22 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
python pygame模块编写飞机大战
2018/11/20 Python
python 自定义对象的打印方法
2019/01/12 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
python 制作网站筛选工具(附源码)
2021/01/21 Python
使用CSS3实现SVG路径描边动画效果入门教程
2019/10/21 HTML / CSS
银行自荐信范文
2013/10/07 职场文书
寒假实习自荐信
2014/01/26 职场文书
酒店管理求职信
2014/06/09 职场文书
浏览器常用基本操作之python3+selenium4自动化测试(基础篇3)
2021/05/21 Python
Python+Appium实现自动抢微信红包
2021/05/21 Python
Logback 使用TurboFilter实现日志级别等内容的动态修改操作
2021/08/30 Java/Android