javascript如何建立一个静态变量(JavaScript中子函数访问外部变量的3种解决方法)
类别:编程学习 浏览量:1658
时间:2021-10-21 07:26:11 javascript如何建立一个静态变量
JavaScript中子函数访问外部变量的3种解决方法前言
我们在写web页面时,肯定会经常遇到下面这种情况:
<body> <li class="btns-wrapper"></li> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> var wrapper = $('.btns-wrapper'); for(var i = 0; i < 5; i++){ var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper); btn.on('click', function(evt){ console.log('点击按钮:' + i); }); } </script> </body>
代码很简单,就是在页面上创建几个按钮,同时定义按钮的点击事件
可当点击按钮时,我们发现获取到的序号一直都是5,也就是 i 最后的值。
这是因为定义click事件时的匿名函数所引用的都是同一个变量 i
解决办法1:立即执行
var wrapper = $('.btns-wrapper'); for(var i = 0; i < 5; i++){ var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper); //默认方法 //btn.on('click', function(evt){ // console.log('点击按钮:' + i); //}); //方法1:立即执行 btn.on('click', (function(n){ return function(evt){ console.log('点击按钮:' + n); } })(i)); }
这种方式就是在定义事件时直接为每个按钮都创建了一个独立的匿名函数(闭包),并且每个函数都持有正确的 i 变量
解决办法2:利用jquery的事件传参
var wrapper = $('.btns-wrapper'); for(var i = 0; i < 5; i++){ var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper); //默认方法 //btn.on('click', function(evt){ // console.log('点击按钮:' + i); //}); //方法2:利用JQuery的事件传参 btn.on('click', { i: i }, function(evt){ console.log('点击按钮:' + evt.data.i); }); }
这种办法就简单多了,直接利用jquery将参数体传递给匿名函数即可。
解决办法3:利用dom的data属性
var wrapper = $('.btns-wrapper'); for(var i = 0; i < 5; i++){ var btn = $('<button>按钮' + i + '</button>').appendTo(wrapper); //默认方法 //btn.on('click', function(evt){ // console.log('点击按钮:' + i); //}); //方法3:利用dom的data属性 btn.data('i', i); btn.on('click', function(evt){ console.log('点击按钮:' + $(this).data('i')); }); }
这种方法也很简单,弊端就是无法利用data属性定义结构化的数据。
总结
综合来看,如果是jquery环境,利用事件参数来转递变量是最简单的,而且可以传递结构化的数据。
否则只能通过立即执行(闭包)的方式。
到此这篇关于JavaScript中子函数访问外部变量的文章就介绍到这了,更多相关JS子函数访问外部变量内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- node.js缓存区(如何利用node实现静态文件缓存详解)
- js时间变成日期格式(js日期时间格式化的方法实例)
- 详解JS中你不知道的各种循环测速(详解JS中你不知道的各种循环测速)
- js中Attribute和Property区别
- js中事件的三个阶段(JavaScript中事件冒泡机制示例详析)
- python提取json数据(Python爬取数据保存为Json格式的代码示例)
- extjs实现树形下拉框
- js数字时钟编程(JavaScript实现动态数字时钟)
- JS中Location
- element-ui 菜单悬停样式(js如何构造elementUI树状菜单的数据结构详解)
- extjs xtype的使用
- js获取子表单所有数据(JavaScript实现异步提交表单数据)
- js定时器几分钟执行(利用JS定时器实现元素移动)
- extjs 日期控件
- js特效星空(ThingJS粒子特效一键实现雨雪效果)
- Js如何判断浏览器类型和版本
- 袁冰妍终于接到新剧,饰演反追男主,看到合作演员 眼光果然毒辣(袁冰妍终于接到新剧)
- 记忆中的台词(记忆中的台词)
- 袁冰妍轧戏 拍《琉璃》的同时还在拍《将夜》,难怪被骂演技差(拍琉璃的同时还在拍将夜)
- 刚红就耍大牌,《琉璃》角色滤镜碎一地,心疼工作人员(琉璃角色滤镜碎一地)
- 袁冰妍郑业成这对可以处,有脸红情话他们是真的敢说(袁冰妍郑业成这对可以处)
- 《祝卿好》台词又土又甜,就喜欢这么直接的恋爱(祝卿好台词又土又甜)
热门推荐
- sql设置注释(SqlSever 注释符 单行注释与多行注释)
- python怎么提取微信数据(使用Python+wxpy 找出微信里把你删除的好友实例)
- sqlifnull如何使用(在 SQL 语句中处理 NULL 值的方法)
- html5自定义结构指令(浅析HTML5 meta viewport参数)
- php7内核剖析(浅析PHP7的多进程及实例源码)
- iis中虚拟目录、应用程序的区别
- gitlablinux安装配置(Ubuntu20.04安装配置GitLab的方法步骤)
- 阿里云ECS实例中部署的Web网站运行速度慢的解决方法(阿里云ECS实例中部署的Web网站运行速度慢的解决方法)
- django部署(Django 中间键和上下文处理器的使用)
- group by是底层如何实现分组的(group by 按某一时间段分组统计并查询推荐)