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

发布时间 - 2026-01-10 22:10:20    点击率:

本文实例总结了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程序设计有所帮助。


# JS  # 闭包  # JS闭包与延迟求值用法示例  # JavaScript闭包和范围实例详解  # js闭包用法实例详解  # 深入理解javascript函数参数与闭包  # javascript深入理解js闭包  # JavaScript 匿名函数(anonymous function)与闭包(closure)  # JavaScript中的作用域链和闭包  # Javascript 中的类和闭包  # Javascript闭包演示代码小结  # 一分钟理解js闭包  # JavaScript闭包函数访问外部变量的方法  # 看了  # 相关内容  # 有很多  # 遍历  # 数据结构  # 给大家  # 不做  # 更多关于  # 所述  # 程序设计  # 面向对象  # 操作技巧  # 网上  # 总结了  # brush 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 今日头条AI怎样推荐抢票工具_今日头条AI抢票工具推荐算法与筛选【技巧】  香港服务器网站测试全流程:性能评估、SEO加载与移动适配优化  iOS验证手机号的正则表达式  ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  laravel怎么用DB facade执行原生SQL查询_laravel DB facade原生SQL执行方法  如何在万网ECS上快速搭建专属网站?  ChatGPT常用指令模板大全 新手快速上手的万能Prompt合集  Laravel的HTTP客户端怎么用_Laravel HTTP Client发起API请求教程  原生JS获取元素集合的子元素宽度实例  Python面向对象测试方法_mock解析【教程】  如何在阿里云高效完成企业建站全流程?  如何挑选最适合建站的高性能VPS主机?  北京企业网站设计制作公司,北京铁路集团官方网站?  Laravel如何创建自定义Facades?(详细步骤)  惠州网站建设制作推广,惠州市华视达文化传媒有限公司怎么样?  Mybatis 中的insertOrUpdate操作  BootStrap整体框架之基础布局组件  javascript如何操作浏览器历史记录_怎样实现无刷新导航  如何注册花生壳免费域名并搭建个人网站?  Windows驱动无法加载错误解决方法_驱动签名验证失败处理步骤  如何在橙子建站中快速调整背景颜色?  Laravel PHP版本要求一览_Laravel各版本环境要求对照  Laravel如何连接多个数据库_Laravel多数据库连接配置与切换教程  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  香港代理服务器配置指南:高匿IP选择、跨境加速与SEO优化技巧  中山网站制作网页,中山新生登记系统登记流程?  Laravel Session怎么存储_Laravel Session驱动配置详解  Laravel如何发送系统通知?(Notification渠道示例)  如何在万网自助建站中设置域名及备案?  如何快速搭建个人网站并优化SEO?  如何快速配置高效服务器建站软件?  Laravel怎么实现搜索功能_Laravel使用Eloquent实现模糊查询与多条件搜索【实例】  iOS UIView常见属性方法小结  如何彻底卸载建站之星软件?  Laravel如何为API编写文档_Laravel API文档生成与维护方法  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  Laravel如何设置定时任务(Cron Job)_Laravel调度器与任务计划配置  湖南网站制作公司,湖南上善若水科技有限公司做什么的?  Laravel如何实现登录错误次数限制_Laravel自带LoginThrottles限流配置【方法】  Laravel怎么实现模型属性的自动加密  网站制作大概多少钱一个,做一个平台网站大概多少钱?  详解Android——蓝牙技术 带你实现终端间数据传输  使用豆包 AI 辅助进行简单网页 HTML 结构设计  如何在万网主机上快速搭建网站?  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  Thinkphp 中 distinct 的用法解析  mc皮肤壁纸制作器,苹果平板怎么设置自己想要的壁纸我的世界?  laravel怎么配置Redis作为缓存驱动_laravel Redis缓存配置教程  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  Java遍历集合的三种方式