javascript闭包中循环问题
如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>闭包演示</title>
<script type="text/javascript"> function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body onload="init();">
<p>产品一</p>
<p>产品二</p>
<p>产品三</p>
<p>产品四</p>
<p>产品五</p>
</body>
</html>
解决方式有两种，
1、将变量 i 保存给在每个段落对象（p）上
function init() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].i = i;
pAry[i].onclick = function() {
alert(this.i);
}
}
}
2、将变量 i 保存在匿名函数自身
function init2() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(pAry[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}
再增加3种
3、加一层闭包，i以函数参数形式传递给内层函数
function init3() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
pAry[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
}
4、加一层闭包，i以局部变量形式传递给内存函数
5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）
function init5() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
}
}(i);
}
}
又有一种方法
6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
function init6() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
}
}
再增加一种
7、用Function实现，注意与6的区别
javascript闭包中循环问题的更多相关文章
- 关于javascript闭包中的this对象
我们知道, this对象是运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象.<Javascript高级程序设计&g ...
- Swift 学习笔记 (解决Swift闭包中循环引用的三种方法)
话不多说 直接上代码 class SmartAirConditioner { var temperature:Int = //类引用了函数 var temperatureChange:((Int)-& ...
- Swift 闭包使用(循环引用...）
class networkTool: NSObject { //定义一个可选类型的闭包,用小括号()?括起闭包 var finishedCallBack2:((_ jsonData:String)-& ...
- JavaScript闭包其一：闭包概论 函数式编程中一些基本定义
http://www.nowamagic.net/librarys/veda/detail/1707前面介绍了作用域链和变量对象,现在再讲闭包就容易理解了.闭包其实大家都已经谈烂了.尽管如此,这里还是 ...
- 前端（十三）—— JavaScript高级：回调函数、闭包、循环绑定、面向对象、定时器
回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...
- JavaScript中让Html页面中循环播放文字
JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...
- javascript闭包获取table中tr的索引 分类： JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏
使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...
- swift中闭包的循环引用
首先我们先创造一个循环引用 var nameB:(()->())? override func viewDidLoad() { super.viewDidLoad() let bu = UIBu ...
- [TimLinux] JavaScript 中循环执行和定时执行
1. 两对函数 // 循环执行 // 在每个毫秒数之后,调用函数 var timeid = window.setInterval(函数名, 毫秒数); window.clearInterval(tim ...
随机推荐
- win10安装express遇到的问题。
昨天在centos上成功安装了express,今天想在win10上面装一个,死活安装不了 express可以正常安装,但是每次安装express-generator的时候一直报错 659 silly ...
- 2019.2.14 t1 最大公约数
代码: #include <cstdio> #include <iostream> #include <cstring> #include <algorith ...
- (USB HID) Report Descriptor 理解
在這理整理一下基本 Report Descriptor 對於入門基礎的了解. 在很多文件.Blog都有提到HID report 總共分為3種 : Input.Output.Feature report ...
- 【算法笔记】B1044 火星数字
1044 火星数字 (20 分) 火星人是以 13 进制计数的: 地球人的 0 被火星人称为 tret. 地球人数字 1 到 12 的火星文分别为:jan, feb, mar, apr, may, ...
- 针对ACM输出格式的一个小技巧（对格式错误说不！）
printf("%d%c",bmax," \n"[i==n]); 上文中bmax为题目中需要输出的整形变量,可以脑补很多ans,max之类的,重点在于%c和后面 ...
- JavaScript对象基础知识总结
1.什么叫JavaScript对象? 定义:名值对的集合.简单的讲就是容纳属性值和属性值的容器,这些属性可以是无序的,基本上JavaScript中所有的事物都可以看成对象. 拓展:我们经常说,数组也是 ...
- mybatis映射文件模板mapper.xml格式
1.定义基础的映射 对象DO与数据库字段间的映射 <resultMap id="UserResult" type="UserDO"> <res ...
- decode 和 encode 区别
字符串在Python内部的表示是unicode编码,因此,在做编码转换时,通常需要以unicode作为中间编码,即先将其他编码的字符串解码(decode)成unicode,再从unicode编码(en ...
- python+Selenium之操作滚动条
当我们做测试的时候,如果页面过长,就会定位元素失败,这时可以使用move_to_element方法跳到该元素的位置再操作: from selenium.webdriver.common.action_ ...
- oracle--dump块信息操作
01, 查看表 SQL> select * from tab where TNAME='T'; TNAME TABTYPE ----------------------------------- ...