个网友问了个问题，如下的html，为什么每次输出都是5，而不是点击每个p，就alert出对应的1，2，3，4，5。

  1. <html >
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>闭包演示</title>
  5. <script type="text/javascript">
  6. function init() {
  7. var pAry = document.getElementsByTagName("p");
  8. for( var i=0; i<pAry.length; i++ ) {
  9. pAry[i].onclick = function() {
  10. alert(i);
  11. }
  12. }
  13. }
  14. </script>
  15. </head>
  16. <body onload="init();">
  17. <p>产品一</p>
  18. <p>产品二</p>
  19. <p>产品三</p>
  20. <p>产品四</p>
  21. <p>产品五</p>
  22. </body>
  23. </html>

解决方式有以下几种

1、将变量 i 保存给在每个段落对象（p）上

  1. function init() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].i = i;
  5. pAry[i].onclick = function() {
  6. alert(this.i);
  7. }
  8. }
  9. }

2、将变量 i 保存在匿名函数自身

  1. function init2() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. (pAry[i].onclick = function() {
  5. alert(arguments.callee.i);
  6. }).i = i;
  7. }
  8. }

3、加一层闭包，i以函数参数形式传递给内层函数

  1. function init3() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. (function(arg){
  5. pAry[i].onclick = function() {
  6. alert(arg);
  7. };
  8. })(i);//调用时参数
  9. }
  10. }

4、加一层闭包，i以局部变量形式传递给内存函数

  1. function init4() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. (function () {
  5. var temp = i;//调用时局部变量
  6. pAry[i].onclick = function() {
  7. alert(temp);
  8. }
  9. })();
  10. }
  11. }

5、加一层闭包，返回一个函数作为响应事件（注意与3的细微区别）

  1. function init5() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].onclick = function(arg) {
  5. return function() {//返回一个函数
  6. alert(arg);
  7. }
  8. }(i);
  9. }
  10. }

6、用Function实现，实际上每产生一个函数实例就会产生一个闭包

  1. function init6() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].onclick = new Function("alert(" + i + ");");//new一次就产生一个函数实例
  5. }
  6. }

7、用Function实现，注意与6的区别

  1. function init7() {
  2. var pAry = document.getElementsByTagName("p");
  3. for( var i=0; i<pAry.length; i++ ) {
  4. pAry[i].onclick = Function('alert('+i+')')
  5. }
  6. }
 此博客转自其他博客

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

  1. JavaScript葵花宝典之闭包

    闭包,写过JS脚本的人对这个词一定不陌生,都说闭包是JS中最奇幻的一个知识点,  虽然在工作中,项目里经常都会用到~  但是是不是你已经真正的对它足够的了解~~ 又或者是你代码中出现的闭包,并不是你刻 ...

  2. 让你分分钟学会Javascript中的闭包

    Javascript中的闭包 前面的话: 闭包,是 javascript 中重要的一个概念,对于初学者来讲,闭包是一个特别抽象的概念,特别是ECMA规范给的定义,如果没有实战经验,你很难从定义去理解它 ...

  3. 深入理解javascript原型和闭包（4）——隐式原型

    注意:本文不是javascript基础教程,如果你没有接触过原型的基本知识,应该先去了解一下,推荐看<javascript高级程序设计(第三版)>第6章:面向对象的程序设计. 上节已经提到 ...

  4. 浅谈JavaScript中的闭包

    浅谈JavaScript中的闭包 在JavaScript中,闭包是指这样一个函数:它有权访问另一个函数作用域中的变量. 创建一个闭包的常用的方式:在一个函数内部创建另一个函数. 比如: functio ...

  5. javascript中的闭包解析

    学习javaScript已经有一段时间了,在这段时间里,已经感受到了JavaScript的种种魅力,这是一门神奇的语言,同时也是一门正在逐步完善的语言,相信在大家的逐步修改中,这门语言会逐步的完善下去 ...

  6. 《深入理解javascript原型和闭包系列》 知识点整理(转)

    深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解,由浅入深,通俗易懂,每个字都值得细细研究. 一.一切都是对象 1. typeof操作符输出6种类型:string boolea ...

  7. 《深入理解javascript原型和闭包系列》 知识点整理

    深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解,由浅入深,通俗易懂,每个字都值得细细研究. 一.一切都是对象 1. typeof操作符输出6种类型:string boolea ...

  8. JavaScript中的闭包理解

    原创文章,转载请注明:JavaScript中的闭包理解  By Lucio.Yang 1.JavaScript闭包 在小学期开发项目的时候,用node.js开发了服务器,过程中遇到了node.js的第 ...

  9. javascript作用域和闭包之我见

    javascript作用域和闭包之我见 看了<你不知道的JavaScript(上卷)>的第一部分--作用域和闭包,感受颇深,遂写一篇读书笔记加深印象.路过的大牛欢迎指点,对这方面不懂的同学 ...

随机推荐

  1. iReport 下载地址

    iReport 下载地址: https://osdn.jp/projects/sfnet_ireport/releases/# 来自为知笔记(Wiz)

  2. 为什么很多网站的表单提交按钮都是用＜a＞标签

    之 前看过一些文章,说是用a标签来代替submit按钮更好一些,因为submit按钮在IE6下会有一些兼容的问题,不好统一,而且input的行高在各 浏览器参差不齐,还不能用line-height控制 ...

  3. 了解HTML表单之input元素的30个元素属性

    目录 传统属性 name type accept alt checked disabled readonly maxlength size src value 新增属性 autocomplete au ...

  4. RAC Concept

    1. RAC的高可用性 RAC的高可用性主要包含以下几点: 1> 实现节点间的负载均衡. 2> 实现失败切换的功能. 3> 通过Service组件来控制客户端的访问路径. 4> ...

  5. FlashFXP(强大的FXP/ftp上传工具)V5.0.0.3722简体中文特别版

    flashfxp是功能强大的fxp/ftp软件,融合了一些其他优秀ftp软件的优点,如像cuteftp一样可以比较文件夹, FlashFXP是一款功能强大的FXP/ftp上传工具, FlashFXP集 ...

  6. 12个新潮的 HTML5 & CSS3 网站设计欣赏

    响应式设计和基于 HTML5 & CSS3 编码的网站是为网站制作的理想解决方案. HTML5 & CSS3 制作出来的网站结构良好,有很多惊人的效果,并能够在任何设备上浏览. 今天, ...

  7. Elasticsearch嵌套聚合

    Elasticserch在新版本中支持聚合操作,而聚合操作也可以嵌套使用,方法如下: curl -XGET 10.4.44.19:9200/test/test/_search?pretty -d ' ...

  8. libqxt编译

    一.说明 编译环境:win10.qt5.6.1-1.vs2013和libqxt源码(从git上下载) libqxt:libqxt 关于libqxt的说明,请到libqxt的官网阅读,说着看图1,图1是 ...

  9. 【转载】GPU 加速下的图像处理

    Instagram,Snapchat,Photoshop. 所有这些应用都是用来做图像处理的.图像处理可以简单到把一张照片转换为灰度图,也可以复杂到是分析一个视频,并在人群中找到某个特定的人.尽管这些 ...

  10. github.com/dotnet/orleans

    Orleans is a framework that provides a straight-forward approach to building distributed high-scale ...