JavaScript闭包导致的for循环问题解决 【转】
来源:互联网 发布:ios app 耗电量优化 编辑:程序博客网 时间:2024/05/20 09:05
有个网友问了个问题,如下的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以局部变量形式传递给内存函数
- 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+')')
- }
- }
- JavaScript闭包导致的for循环问题解决 【转】
- JavaScript 闭包 for循环
- 解决javascript for 循环使用闭包的问题
- JavaScript闭包 取for循环i 【转】
- JavaScript闭包 取for循环i
- JavaScript--------闭包 取for循环i
- for循环的闭包
- for循环的闭包
- JS之经典for循环闭包问题解决方法
- JavaScript之循环里的闭包
- 关于for循环导致的 ConcurrentModification 异常
- for循环 i 闭包
- 闭包与for循环
- for循环与闭包
- JavaScript之详述闭包导致的内存泄露
- javascript 闭包 导致 的 重复 绑定 事件
- Javascript for 循环的坑
- javascript 里的for循环
- Android获取文件的MD5值
- MoveFileEx 的特殊应用
- 做Mysql主从时,注意使用replicate_wild_do_table和replicate-wild-ignore-table
- 关于 ok6410sd卡usb不能烧写的问题
- C语言:输入一行字符,统计其中有多少单词,单词之间用空格分隔开
- JavaScript闭包导致的for循环问题解决 【转】
- Nginx_lua
- 关于线程
- asp.net C#如何上传指定路径的图片,不用FileUpload控件[转]
- 安全高性能网站搭建(六)
- 【转载】获取系统时间(精确到微秒),驱动中KeQueryPerformanceCounter,Win32程序QueryPerformanceCounter
- 导入非编译后代码、path是导入xwork文件。
- linux 网页快照(命令行将某url汇成图片) CutyCapt
- windows 8 启动自动加载VHD存储池