JavaScript for循环闭包【转】

个网友问了个问题，如下的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 >
<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、加一层闭包，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以局部变量形式传递给内存函数

function init4() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
pAry[i].onclick = function() {
alert(temp);
}
})();
}
}

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的区别

function init7() {
var pAry = document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
pAry[i].onclick = Function(‘alert(‘+i+‘)‘)
}
}

此博客转自其他博客

时间： 2024-10-10 21:16:44

JavaScript for循环闭包【转】的相关文章

JavaScript之全选/反选/取消，for循环闭包

需求:table中要求点击红色单元格和点击checkbox的效果一样,最后一行点击就是全选.反选.取消选择的效果. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> table{ width: 400px; height: 15px; backgrou

转发请标明来源:http://www.cnblogs.com/johnhou/p/javascript.html 请尊重笔者的劳动成果 --John Hou 今天我们从内存结构上来讲解下 javascript中的闭包概念. 闭包:是指有权访问另外一个函数作用域中的变量的函数.创建闭包的常见方式就是在一个函数内部创建另外一个函数. 在javascript中没有块级作用域,一般为了给某个函数申明一些只有该函数才能使用的局部变量时,我们就会用到闭包,这样我们可以很大程度上减少全局作用域中的变量,净

JavaScript葵花宝典之闭包

闭包,写过JS脚本的人对这个词一定不陌生,都说闭包是JS中最奇幻的一个知识点, 虽然在工作中,项目里经常都会用到~ 但是是不是你已经真正的对它足够的了解~~ 又或者是你代码中出现的闭包,并不是你刻意而为之的行为~ 又或者是因为能达到效果,也知道是闭包,但是原理却不知道?.... 一千个人就有一千个哈姆雷特~ 每个人也许都有自己对闭包的理解, 我也不例外, 曾经N次百度过闭包,却没有真正的消化过这个知识点, 也曾工作中无数次运用过闭包, 却不知其所以然~~ 所以,我想把我理解的闭包,自己总结

javascript中的闭包解析

学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去,在上一篇随笔中,和大家分享了JavaScript中独有的类中的继承方式,今天呢,就跟大家分享一下我这几天一直在搞,却还是搞的不是很透彻的闭包问题,对于一个初学者而言,JavaScript中的闭包无疑是一个难点,而且也是我们必须要掌握的一个重点,那么今天我就跟大家分享一下我在学习闭包的时候的感悟以及

Javascript中的闭包（转载）

前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它.下面是作者从作用域链慢慢讲到闭包以及在后面提到了一些闭包的高级用法.下面大家一起来学习Javascript中的闭包. 谈一谈JavaScript作用域链当执行一段JavaScript代码(全局代码或函数)时,JavaScript引擎会创建为其创建一个作用域又称为执行上下文(Execution Context),在页面加载后会

循环闭包的影响以及其解决方案

上一次,我已经讲过闭包是如何形成的,以及它的用途.但是对于循环闭包产生的陷阱,和解决方案一笔带过啊(根本就没有)!本着不坑爹的思想,绝逼是要重新再梳理一遍.但无论如何还是要强调一下的,在闭包中会一直引用变量(是引用而不是副本),直到其断开连接不再引用,在内存中的闭包就可以得到释放.所以当我们知道这个道理之后,我们就可以开始我们今天的旅程了. 上次的例子举的不够好,竟然要操作DOM的,这次我们换个更直观的写法,用setTimeout函数. show code! 这一次使用的是定时器setTimeo

4、JavaScript高级之闭包

一.什么是闭包距离上一次更新有一段时间了,过年你懂得,接下来就谈谈JavaScript的高级用法--闭包.js的闭包其实不是什么难懂的高深的概念,只是有些书籍当中介绍的不够易懂或者说举得例子不太恰当,现在我们就通过简单的例子来理解"闭包".作为程序员,也许一段针对的代码,比那些文字描述更能说明问题,用代码说话,眼见为实. 好了,先看下面的一段代码: function t1(){ var age = 20; function t2(){ alert(age); } return t2;

深入理解javascript原型和闭包（15）——闭包

http://www.cnblogs.com/wangfupeng1988/p/3994065.html 深入理解javascript原型和闭包(15)——闭包

javascript中的闭包。

JavaScript for循环 闭包 【转】

JavaScript for循环 闭包 【转】的相关文章

JavaScript for循环闭包【转】

JavaScript for循环闭包【转】的相关文章