JS中闭包的经典用法小结(2则示例)


Posted in Javascript onDecember 28, 2016

本文实例总结了JS中闭包的经典用法。分享给大家供大家参考,具体如下:

闭包这个东西,网上有很多介绍资料。个人看了很多,还是一知半解。这里不做理论介绍,直接给出2个例子。

代码1:记录函数被调用的次数

function a()
{
  var i = 0;
  function b()
  {
    return ++i;
  }
  return b;
}
var c = a();
c();//1
c();//2

这种方式类似C语言中的private static变量,能够保持局部变量的内存不释放。

代码2:正确给DOM注册事件处理函数

<body>
  <input type="button" id="b1" value="1">
  <input type="button" id="b2" value="2">
  <input type="button" id="b3" value="3">
  <input type="button" id="b4" value="4">
  <script type="text/javascript">
    var buttons = document.getElementsByTagName("input");
    for (var i = 0; i < buttons.length; i++)
    {
      // 方式1:i的值一直是3
      //buttons[i].onclick = function() {
      // console.log(i + " was clicked.");
      //}
      // 方式2:从0到3,是我们要的效果
      (function(i){
        buttons[i].onclick = function() {
          console.log(i + " was clicked.");
        }
      })(i);
    }
  </script>
</body>

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
代码生成器 document.write()
Apr 15 Javascript
jQuery关于导航条背景切换效果实现示例
Sep 04 Javascript
jQuery的ready方法详解
Nov 27 Javascript
浅谈Javascript中Object与Function对象
Sep 26 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
第二次聊一聊JS require.js模块化工具的基础知识
Apr 17 Javascript
对javascript继承的理解
Oct 11 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
vue 中 命名视图的用法实例详解
Aug 14 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
AngularJS实现网站换肤实例
Feb 19 #Javascript
详解js树形控件—zTree使用总结
Dec 28 #Javascript
js 轮播效果实例分享
Dec 28 #Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 #Javascript
Bootstrap 模态框实例插件案例分析
Dec 28 #Javascript
Angular使用ng-messages与PHP进行表单数据验证
Dec 28 #Javascript
Bootstrap中datetimepicker使用小结
Dec 28 #Javascript
You might like
新闻分类录入、显示系统
2006/10/09 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
thinkPHP3.2.3结合Laypage实现的分页功能示例
2018/05/28 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
理解JS事件循环
2016/01/07 Javascript
xtemplate node.js 的使用方法实例解析
2016/08/22 Javascript
webpack+vue.js快速入门教程
2016/10/12 Javascript
Javascript实现汉字和拼音互转的终极方案
2016/10/19 Javascript
express默认日志组件morgan的方法
2018/04/05 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
百度小程序之间的页面通信过程详解
2019/07/18 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
jQuery实现中奖播报功能(让文本滚动起来) 简单设置数值即可
2020/03/20 jQuery
JavaScript进阶(二)词法作用域与作用域链实例分析
2020/05/09 Javascript
[01:02:07]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
异步任务队列Celery在Django中的使用方法
2018/06/07 Python
python设置值及NaN值处理方法
2018/07/03 Python
Python高级特性切片(Slice)操作详解
2018/09/27 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
python的schedule定时任务模块二次封装方法
2019/02/19 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
python性能测量工具cProfile使用解析
2019/09/26 Python
Python字符串的修改方法实例
2019/12/19 Python
Python xlrd excel文件操作代码实例
2020/03/10 Python
Pycharm中安装wordcloud等库失败问题及终端通过pip安装的Python库如何添加到Pycharm解释器中(推荐)
2020/05/10 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
Claire’s法国:时尚配饰、美容、珠宝、头发
2021/01/16 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
单位综合评价意见
2015/06/05 职场文书
优秀党员主要事迹范文
2015/11/05 职场文书
详解在SQLPlus中实现上下键翻查历史命令的功能
2022/03/18 SQL Server
Redis全局ID生成器的实现
2022/06/05 Redis