如下的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闭包中循环问题的更多相关文章

  1. 关于javascript闭包中的this对象

    我们知道, this对象是运行时基于函数的执行环境绑定的:在全局函数中,this等于window,而当函数被作为某个对象的方法调用时,this等于那个对象.<Javascript高级程序设计&g ...

  2. Swift 学习笔记 (解决Swift闭包中循环引用的三种方法)

    话不多说 直接上代码 class SmartAirConditioner { var temperature:Int = //类引用了函数 var temperatureChange:((Int)-& ...

  3. Swift 闭包使用(循环引用...)

    class networkTool: NSObject { //定义一个可选类型的闭包,用小括号()?括起闭包 var finishedCallBack2:((_ jsonData:String)-& ...

  4. JavaScript闭包其一:闭包概论 函数式编程中一些基本定义

    http://www.nowamagic.net/librarys/veda/detail/1707前面介绍了作用域链和变量对象,现在再讲闭包就容易理解了.闭包其实大家都已经谈烂了.尽管如此,这里还是 ...

  5. 前端(十三)—— JavaScript高级:回调函数、闭包、循环绑定、面向对象、定时器

    回调函数.闭包.循环绑定.面向对象.定时器 一.函数高级 1.函数回调 // 回调函数 function callback(data) {} // 逻辑函数 function func(callbac ...

  6. JavaScript中让Html页面中循环播放文字

    JavaScript中让Html页面中循环播放文字 <html> <head> <meta http-equiv="Content-Type" con ...

  7. javascript闭包获取table中tr的索引 分类: JavaScript 2015-05-04 15:10 793人阅读 评论(0) 收藏

    使用javascript闭包获取table标签中tr的索引 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN& ...

  8. swift中闭包的循环引用

    首先我们先创造一个循环引用 var nameB:(()->())? override func viewDidLoad() { super.viewDidLoad() let bu = UIBu ...

  9. [TimLinux] JavaScript 中循环执行和定时执行

    1. 两对函数 // 循环执行 // 在每个毫秒数之后,调用函数 var timeid = window.setInterval(函数名, 毫秒数); window.clearInterval(tim ...

随机推荐

  1. 基于windows fiber的协程(coroutine)实现

    一个非常简单,但是实用的协程实现,使用Windows的*Fiber函数族(linux可以稍微改一下用*context函数族). fco.h #ifndef _MSC_VER #error " ...

  2. fetch 请求列表ListView

    //练习二 电影列表(网络请求数据)可参考:http://www.jianshu.com/p/22de6734d858 /** 展示电影列表* 逻辑:* 未获得数据时:显示等待页面* 获得数据时: 显 ...

  3. Bad Smell (代码的坏味道)

    sourcemaking 如果一段代码是不稳定或者有一些潜在问题的,那么代码往往会包含一些明显的痕迹.正如食物要腐坏之前,经常会发出一些异味一样, 我们管这些痕迹叫做 "代码异味" ...

  4. 高阶篇:4.1.2)QFDII(设计要求逐层分配给各零件)

    本章目的:明确QFDII的作用:输入为设计要求(Design Feature),输出为零件特征(Part Characteristic),将设计要求分配到每一个零件特征中去: 本章开始介绍产品结构设计 ...

  5. 世界最大BT服务器本周死了三回 海盗湾要凉凉?

    想當初,我是受到BT網站海盜灣的啟發,開發了一個DHT下載網站:http://www.ibmid.com,有一段時間通宵編程,理解此個協議. 海盗湾(The Pirate Bay)是世界上最大的 BT ...

  6. 7. JavaScript学习笔记——DOM

    7. DOM 7.1 DOM简介 DOM是文档对象模型,HTML文档的所有内容都是节点: 整个文档是一个文档节点 (document 最顶级) HTML元素内的文本是文本节点 每个表面的属性是属性节点 ...

  7. odoo 开发 context 上下文的用法

    context   这是一个上下文,运用很灵活  得到整个context   self.context_get() self.env['res.users'].context_get() 得到cont ...

  8. PyCharm 通过Github和Git上管理代码

    1.最近希望通过github来管理代码,记录下pycharm上的设置,以下是针对windows版本.mac版本略有却别 如图所示 file-settings-Version Control-GitHu ...

  9. POJ 2253 Frogger ,poj3660Cow Contest(判断绝对顺序)(最短路,floyed)

    POJ 2253 Frogger题目意思就是求所有路径中最大路径中的最小值. #include<iostream> #include<cstdio> #include<s ...

  10. 小y的质数

    题目链接:https://ac.nowcoder.com/acm/contest/634/C 链接:https://ac.nowcoder.com/acm/contest/634/C来源:牛客网 题目 ...