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子函数访问外部变量内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- php加密平台(PHP7实现和CryptoJS的AES加密方式互通示例AES-128-ECB加密)
- js宏任务都有哪些(JavaScript 操作宏任务与微任务)
- 在html中使用javascript实例代码(原生 JS+CSS+HTML 实现时序图的方法)
- extjs table布局
- JS中Location
- js的遍历数组方法(JS中数组常用的循环遍历你会几种)
- react组件分析(react-diagram 序列化Json解读案例分析)
- ExtJs中getCmp、getDom、Get的区别
- ASP.NET中使用CodeDomProvider调用js文件中的js方法
- JS闭包的用法
- 常用的几种jsp开发环境搭建(怎么一键安装Jsp网站程序?Jsp环境一键配置软件JspStudy推荐)
- js中Math对象的用法
- js数组排序有哪些(js将多维数组转为一维数组后去重排序)
- js获取子表单所有数据(JavaScript实现异步提交表单数据)
- js如何生成随机数
- python json转换字符串(python3 json数据格式的转换dumps/loads的使用、dict to str/str to dict、json字符串/字典)
- 这里输入关键词(怎么输入关键词搜索)
- 34岁的舒畅,就这样走到了末路,不知会不会后悔15年前的草率决定(就这样走到了末路)
- 不走心的古装造型 舒畅 毁容式 出演,萧蔷雷出新高度(不走心的古装造型)
- 嘉南传 第22集(嘉南传第22集)
- 哪版孙悟空最萌 黄渤躺萌了(哪版孙悟空最萌)
- 融入小人物的喜怒哀乐,黄渤饰演的角色为什么让人观看时欲罢不能(融入小人物的喜怒哀乐)
热门推荐
- mysql触发器如何创建(MySQL 触发器的使用和理解)
- nginx过滤http请求协议(nginx对http请求处理的各个阶段详析)
- mysql数据库简单操作(一篇文章教会你进行MySQL数据库和数据表的基本操作)
- sqlserver中根据日期时间获取秒数(sql server编写通用脚本实现获取一年前日期的方法)
- react循环有几种方法(React forwardRef的使用方法及注意点)
- css3字体怎么设置(使用CSS3 font-feature-settings特性减除字体动画震颤效果)
- python常用的切片操作(使用python PIL库实现简单验证码的去噪方法步骤)
- python plot绘图(python使用Plotly绘图工具绘制气泡图)
- 如何启动wampserver数据库服务(wampserver更改默认站点目录www方法教程)
- 织梦系统的seo教程(织梦后台SEO优化和修改关键字的方法)