JavaScript中子函数访问外部变量的方法
我们在写web页面时，肯定会经常遇到下面这种情况：
<body>
<div class="btns-wrapper"></div>
<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中子函数访问外部变量的方法的更多相关文章
- ios中block访问外部变量的一些注意点
Block类型是一个C级别的语法和运行机制.它与标准的C函数类似,不同之处在于,它除了有可执行代码以外,它还包含了与堆.栈内存绑定的变量.因此,Block对象包含着一组状态数据,这些数据在程序执行时用 ...
- javascript中函数声明、变量声明以及变量赋值之间的关系与影响
javascript中函数声明.变量声明以及变量赋值之间的关系与影响 函数声明.变量声明以及变量赋值之间有以下几点共识: 1.所有的全局变量都是window的属性 2.函数声明被提升到范围作用域的顶端 ...
- Java 访问限制符 在同一包中或在不同包中：使用类创建对象的权限 & 对象访问成员变量与方法的权限 & 继承的权限 & 深入理解protected权限
一.实例成员与类成员 1. 当类的字节码被加载到内存, 类中类变量.类方法即被分配了相应内存空间.入口地址(所有对象共享). 2. 当该类创建对象后,类中实例变量被分配内存(不同对象的实例变量互不相同 ...
- awk内置函数、外部变量
外部变量 ①获取外部变量 格式: awk '{action}' 变量名=变量值 ,这样传入变量可以在action中获得值. 示例: test='awk test'--day-5 外部变量 ①获取外部变 ...
- PHP自定义函数使用外部变量
一般,php的自定义函数不能直接使用外部变量. 在php自定义函数中使用外部变量前,需要先使用global对外部变量进行声明. <?php $var = "hello World!& ...
- 关于Lambda表达式访问外部变量
在<C#高级编程>一书中提到通过Lambda表达式可以访问Lambda表达式块外部的变量 ,这是一个很好的功能(类似Js中的 闭包).但是如果没有正确的使用,会非常危险. 比如下面的事例中 ...
- Javascript中函数提升和变量提升
词法分析 词法分析方法: js运行前有一个类似编译的过程即词法分析,词法分析主要有三个步骤: 分析参数 再分析变量的声明 分析函数说明 具体步骤如下: 函数在运行的瞬间,生成一个活动对象(Active ...
- unittest之跳过用例（skip） (含如何调用类里面函数相互调取变量的方法)
当测试用例写完后,有些模块有改动时候,会影响到部分用例的执行,这个时候我们希望暂时跳过这些用例. 或者前面某个功能运行失败了,后面的几个用例是依赖于这个功能的用例,如果第一步就失败了,后面的用例也就没 ...
- mybatis:访问静态变量或方法
访问方法: <if test="@com.csget.constant.ConstantApp@getUser('mobile')== 'kf'"> <![CDA ...
随机推荐
- sscanf的应用
1.提取字符串 2.提取指定长度的字符串 3.提取指定字符为止的字符串 4.取仅包含指定字符集的字符串 5.取到指定字符集为止的字符串 #include <stdio.h> int mai ...
- python 键盘中断子线程及graceful exiting方案
最近需要实现一个服务程序的graceful exiting,保证在退出前关闭所有已创建的子线程 python借助KeyboardInterrupted异常响应键盘中断,因此首先尝试在子线程中try-c ...
- chardet模块
import chardet chardet.detect(f.read())检测哪种编码
- 啥？SynchronousQueue和钟点房一个道理
今天这篇文章,我们继续讲架构师大刘的故事. 大刘有段时间经常会给一些程序员讲课.这一方面是由于团队培训的需要,一方面也是大刘自身想搞搞凡尔赛,嘚瑟一下自身的实力. 大刘讲课是允许公司任何一个人进去听的 ...
- golang：TCP总结
在TCP/IP协议中,"IP地址+TCP或UDP端口号"唯一标识网络通讯中的一个进程."IP地址+端口号"就对应一个socket.欲建立连接的两个进程各自有一个 ...
- 强哥JavaScript学习笔记
js文件放header头最后,js代码放body体最后 js语言定位: js是基于对象的语言 php.java是面向对象的语言 定义变量: var str="hello world" ...
- 重定向-管道技术-xargs命令详解
重定向 什么是重定向? 将原本要输出在屏幕的内容,重新定向输出到指定的文件或设备中. 为什么要使用重定向? 1.备份的时候需要知道备份的结果. 2.屏幕上输出信息比较重要的时候需要保存下来. 3.定时 ...
- Linux 性能监控工具
- 圆盘时钟效果 原生JS
圆盘时钟 旋转时钟 数字时钟 写在前面 仿荣耀手机时钟,设计的同款时钟效果 实现效果 实现原理 数字时钟 利用Date内置对象获取当下的时间,通过处理呈现在页面上 这一步获取时间是非常简单的,通过Da ...
- 对狂神说java的springboot中spring security的总结
1.spring security的环境搭建 首先新建一个springboot项目,只够选web中的spring web依赖 然后在pom.xml导入相关依赖 <!--thymeleaf模块-- ...