Javascript闭包演示代码小结
JavaScript代码 小结 演示 闭包
2023-06-13 09:14:27 时间
产品0
产品1
产品2
产品3
产品4
以上场景是初学者经常碰到的。即获取HTML元素集合,循环给元素添加事件。在事件响应函数中(eventhandler)获取对应的索引。但每次获取的都是最后一次循环的索引。
原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元素添加点击事件。响应函数function(){alert(i);}中的i并非每次循环时对应的i(如0,1,2,3,4)而是循环后最后i的值5。或者说循环时响应函数内并未能保存对应的值i,而是最后一次i++的值5。
了解了原因,摸索出了很多解决办法(纯粹是兴趣)。最先想到的前两种
1、将变量i保存给在每个段落对象(p)上
functioninit1(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].i=i;
pAry[i].onclick=function(){
alert(this.i);
}
}
}
2、将变量i保存在匿名函数自身
functioninit2(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
(pAry[i].onclick=function(){
alert(arguments.callee.i);
}).i=i;
}
}
后又想到了三种
3、加一层闭包,i以函数参数形式传递给内层函数
functioninit3(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
(function(arg){
pAry[i].onclick=function(){
alert(arg);
};
})(i);//调用时参数
}
}
4、加一层闭包,i以局部变量形式传递给内层函数
functioninit4(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
(function(){
vartemp=i;//调用时局部变量
pAry[i].onclick=function(){
alert(temp);
}
})();
}
}
5、加一层闭包,返回一个函数作为响应事件(注意与3的细微区别)
functioninit5(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=function(arg){
returnfunction(){//返回一个函数
alert(arg);
}
}(i);
}
}
后又发现了两种
6、用Function实现,实际上每产生一个函数实例就会产生一个闭包
functioninit6(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=newFunction("alert("+i+");");//new一次就产生一个函数实例
}
}
7、用Function实现,注意与6的区别
functioninit7(){
varpAry=document.getElementsByTagName("p");
for(vari=0;i<pAry.length;i++){
pAry[i].onclick=Function("alert("+i+")");
}
}
相关文章
- JavaScript进阶-03
- 【说站】javascript中迭代如何理解
- JavaScript入门详解编程语言
- javascript圆上每个点的坐标计算方法详解编程语言
- 访问百度和谷歌网速测试的javascript代码
- JavaScript在IE中“意外地调用了方法或属性访问”
- javascript正则修正符
- JavaScript验证浏览器是否支持javascript的方法小结
- JavaScript利用StringBuffer类提升+=拼接字符串效率
- JavaScript正在上传功能提示效果代码
- javascript静态树菜单实现代码
- javascript设为首页与加入收藏兼容多浏览器代码
- JavaScript中的几个关键概念的理解-原型链的构建
- JavaScript打印iframe内容示例代码
- javascript获取选中的文本的方法代码
- JavaScript实现简单的时钟实例代码
- 利用noesis.Javascript开源组件.Net中执行javascript脚本
- Javascript中的异步编程规范Promises/A详细介绍
- JavaScript数组常用操作技巧汇总
- JavaScript实现在数组中查找不同顺序排列的字符串