浅谈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 相关文章推荐
JS 字符串连接[性能比较]
May 10 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
Feb 18 Javascript
深入理解JavaScript系列(12) 变量对象(Variable Object)
Jan 16 Javascript
ExtJS实现文件下载的方法实例
Nov 09 Javascript
JavaScript使用Max函数返回两个数字中较大数的方法
Apr 06 Javascript
vue.js的安装方法
May 12 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
Koa2微信公众号开发之消息管理
May 16 Javascript
vue中如何实现pdf文件预览的方法
Jul 12 Javascript
vue中v-for通过动态绑定class实现触发效果
Dec 06 Javascript
elementUI 动态生成几行几列的方法示例
Jul 11 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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入门速成教程
2007/03/19 PHP
解析PHP函数array_flip()在重复数组元素删除中的作用
2013/06/27 PHP
php读取csc文件并输出
2015/05/21 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
PHP xpath()函数讲解
2019/02/11 PHP
Laravel框架源码解析之模型Model原理与用法解析
2020/05/14 PHP
onbeforeunload与onunload事件异同点总结
2013/06/24 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
javascript操作excel生成报表全攻略
2014/05/04 Javascript
javascript数组遍历for与for in区别详解
2014/12/04 Javascript
基于jQuery实现网页进度显示插件
2015/03/04 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
2016/11/28 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
jquery ajax加载数据前台渲染方式 不用for遍历的方法
2018/08/09 jQuery
vue地址栏直接输入路由无效问题的解决
2018/11/15 Javascript
js中位运算的运用实例分析
2018/12/11 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
Javascript 模拟mvc实现点餐程序案例详解
2020/12/24 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Python实现批量读取word中表格信息的方法
2015/07/30 Python
python 设置文件编码格式的实现方法
2017/12/21 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
全面分析Python的优点和缺点
2018/02/07 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
Python中的Django基本命令实例详解
2018/07/15 Python
浅谈python的输入输出,注释,基本数据类型
2019/04/02 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
Python decimal模块使用方法详解
2020/06/08 Python
Forever 21美国官网:美国标志性快时尚品牌
2017/02/20 全球购物
十一酒店活动方案
2014/02/20 职场文书
计算机相关专业自荐信
2014/07/02 职场文书
微软团队与 NASA 科学家和惠普企业(HPE)的工程师合作
2022/04/21 数码科技