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 ...
随机推荐
- php中模拟post，get请求和接受请求详细讲解
在php中我们经常用到curl拓展来进行模拟post.get请求,下面就来具体说说怎么模拟: 一.首先模拟post请求: function http_post_data($url, $query_da ...
- 最短路 CF954D Fight Against Traffic
CF954D Fight Against Traffic 题意描述: 给你一张无向图,一共有n个点(2 <= n <= 1000),由m条边连接起来(1 <= m <= 100 ...
- POJ1330 Nearest Common Ancestors (JAVA)
经典LCA操作.. 贴AC代码 import java.lang.reflect.Array; import java.util.*; public class POJ1330 { // 并查集部分 ...
- js控制输入框只能输入数字不能输入其他字符
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- python之类与对象（3）
4. 类的初始化函数__init__(): 本章参考:https://blog.csdn.net/hellocsz/article/details/82795514 原作者: hellocsz 总结 ...
- Angular material mat-icon 资源参考_Av
ul,li>ol { margin-bottom: 0 } dt { font-weight: 700 } dd { margin: 0 1.5em 1.5em } img { height: ...
- FreeRTOS-01移植及任务创建和删除
根据正点原子FreeRTOS视频整理 单片机:STM32F207VC FreeRTOS源码版本:v10.0.1 任务创建和删除API函数: 工程列表: 1. main.c /**/ #include ...
- /data/tomcat8/bin/setenv.sh
--问题 Java HotSpot(TM) 64-Bit Server VM warning: ignoring option MaxPermSize=512m; support was remove ...
- 2.使用ngx_http_auth_basic_module模块为不带认证的资源添加授权
1.首先需要生成用户名和密码 使用openssl来生成,生成命令(openssl在安装nginx的时候已经安装) echo "kibana:$(openssl passwd -crypt y ...
- 转 rman 恢复报错
###sample 1 原因是新库起了FRA 区,FRA 区的旧文件属于之前的归档日志文件产生,这样会导致无法识别的问题. 解决办法,清空FRA或者恢复时候不启用FRA. RMAN RESTORE ...