浅谈JavaScript for循环 闭包


Posted in Javascript onJune 22, 2016

有个网友问了个问题,如下的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、加一层闭包,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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
js动态设置div的值下例子
Oct 29 Javascript
js实现可以点击收缩或张开的悬浮窗
Sep 18 Javascript
JavaScript高级函数应用之分时函数实例分析
Aug 03 Javascript
JavaScript Canvas实现验证码
Aug 02 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
微信小程序自定义多列选择器使用详解
Jun 21 Javascript
JS回调函数简单易懂的入门实例分析
Sep 29 Javascript
JS中的模糊查询功能
Dec 08 Javascript
js仿360开机效果
Dec 26 Javascript
Quasar Input:type=&quot;number&quot; 去掉上下小箭头 实现加减按钮样式功能
Apr 09 Javascript
Javascript获取随机数的实现方法
Jun 22 #Javascript
解析浏览器端的AJAX缓存机制
Jun 21 #Javascript
JS实现对中文字符串进行utf-8的Base64编码的方法(使其与Java编码相同)
Jun 21 #Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 #Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 #Javascript
第九篇Bootstrap导航菜单创建步骤详解
Jun 21 #Javascript
js简单判断flash是否加载完成的方法
Jun 21 #Javascript
You might like
使用字符串函数输出整数化的PHP版本号
2006/10/09 PHP
php读取excel文件的简单实例
2013/08/26 PHP
PHPer 需要了解的 5 个 Composer 小技巧
2014/08/18 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
JavaScript生成福利彩票双色球号码
2015/05/15 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
2017/01/03 Javascript
BootStrap表单验证实例代码
2017/01/13 Javascript
完美的js图片轮换效果
2017/02/05 Javascript
JavaScript字符串_动力节点Java学院整理
2017/06/27 Javascript
Node.js+ELK日志规范的实现
2019/05/23 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
2020/07/28 Javascript
tornado框架blog模块分析与使用
2013/11/21 Python
合并百度影音的离线数据( with python 2.3)
2015/08/04 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python探索之创建二叉树
2017/10/25 Python
Python FTP两个文件夹间的同步实例代码
2018/05/25 Python
Python利用全连接神经网络求解MNIST问题详解
2020/01/14 Python
基于python的docx模块处理word和WPS的docx格式文件方式
2020/02/13 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
美国性感女装网站:bebe
2017/03/04 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
测绘工程本科生求职信
2013/10/10 职场文书
小学课外阅读总结
2014/07/09 职场文书
中学生运动会新闻稿
2014/09/24 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
Python 中random 库的详细使用
2021/06/03 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技