初学者经常碰到的,即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。原因是初学者并未理解JavaScript的闭包特性。

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

1.  <!DOCTYPE HTML>

2.  <html>

3.  <head>

4.  <meta charset="utf-8" />

5.  <title>闭包演示</title>

6.  <style type="text/css">

7.      p {background:gold;}

8.  </style>

9.  <script type="text/javascript">

10.function init() {

11.    var pAry = document.getElementsByTagName("p");

12.    for( var i=0; i<pAry.length; i++ ) {

13.         pAry[i].onclick = function() {

14.         alert(i);

15.    }

16.  }

17.}

18.</script>

19.</head>

20.<body onload="init();">

21.<p>产品 0</p>

22.<p>产品 1</p>

23.<p>产品 2</p>

24.<p>产品 3</p>

25.<p>产品 4</p>

26.</body>

27.</html>

以上场景是初学者经常碰到的。即获取HTML元素集合，循环给元素添加事件。在事件响应函数中(event handler)获取对应的索引。但每次获取的都是最后一次循环的索引。

原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元 素添加点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的 i(如0，1，2，3，4)而是循环后最后 i 的值5。 或者说循环时响应函数内并未能保存对应的值 i，而是最后一次i++的值5。

了解了原因，下面就由几种方式可与解决：

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

1.  function init1() {

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闭包的特性

2009-07-24 17:30 司徒正美 cnblogs 我要评论(1) 字号：T | T

本文将对Javascript闭包的特性进行分析，并举例进行说明。闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。

AD：

Javascript闭包的定义非常晦涩——闭包，是指语法域位于某个特定的区域，具有持续参照（读写）位于该区域内自身范围之外的执行域上的非持久型变量值能力的段落。这些外部执行域的非持久型变量神奇地保留它们在闭包最初定义（或创建）时的值（深连结）。

简单来说，Javascript闭包就是在另一个作用域中保存了一份它从上一级函数或作用域取得的变量（键值对），而这些键值对是不会随上一级函数的执行完成而销毁。周爱民说得更清楚，闭包就是“属性表”，闭包就是一个数据块，闭包就是一个存放着“Name=Value”的对照表。就这么简单。但是，必须强调，闭包是运行期概念，一个函数实例。

Javascript闭包的实现，通常是在函数内部再定义函数，让该内部函数使用上一级函数的变量或全局变量。

ECMAScript认为使用全局变量是一个简单的Javascript闭包实例。

1.  var sMessage = "Hello World";

2.  function sayHelloWorld(){

3.  alert(sMessage);

4.  };

5.  sayHelloWorld();

但它完成没有体现Javascript闭包的特性……

现在比较让人认同的Javascript闭包实现有如下三种

1.  with(obj){

2.  //这里是对象闭包

3.  }(function(){

4.  //函数闭包

5.  })()try{

6.  //...

7.  } catch(e) {

8.  //catch闭包 但IE里不行

9.  }

附上今天在无忧看到的问题：

要求：

让这三个节点的Onclick事件都能正确的弹出相应的参数。

1.  <ul>

2.  <li id="a1">aa</li>

3.  <li id="a2">aa</li>

4.  <li id="a3">aa</li>

5.  </ul>

6.  <script type="text/javascript">

7.  <ul>

8.  <li id="a1">aa</li>

9.  <li id="a2">aa</li>

10. <li id="a3">aa</li>

11. </ul>

12. <script type="text/javascript">

13. for(var i=1; i < 4; i++){

14. var id = document.getElementById("a" + i);

15. id.onclick = function(){

16. alert(i);//现在都是返回4

17. }

18. }

19. </script>

客服果果的解答：

1.  for(var i=1; i < 4; i++){

2.  var id = document.getElementById("a" + i);

3.  /*

4.  这里生成了一个匿名函数并赋值给对象 id_i;

5.  */

6.  id.onclick = function(){

7.  /*

8.  这个i来源于局部变量，无法以window.i或者obj.i的形式在后期引用，

9.  只好以指针或者变量地址方式保存在这个匿名函数中，

10. 这就是传说的闭包，所以所有这个过程中生成的事件句柄都使用引用

11. 的方式来持久这个变量，也就是这些匿名函数共用一个变量i;

12. */

13. alert(i);

14. };

15. };

局部变全局

1.  for(var i=1; i < 4; i++){

2.  var id = document.getElementById("a" + i);

3.  id.i=i;//这个i有了根

4.  id.onclick=function(){

5.  alert(this.i)

6.  };

7.  };1.for(var i=1; i < 4; i++){

8.  var id = document.getElementById("a" + i);

9.  window[id.id]=i;//这个i有了根

10. id.onclick=function(){

11. alert(window[this.id]);

12. };

13. }

产生一对一的更多Javascript闭包

1.  for(var i=1; i < 4; i++){

2.  var id = document.getElementById("a" + i);

3.  id.onclick = new function(){

4.  var i2=i;//这个i是闭包的闭包

5.  return function(){

6.  alert(i2);

7.  }

8.  };

9.  }

如何给循环中的对象添加事件--深入理解JavaScript的闭包特性的更多相关文章

  1. 深入理解JavaScript的闭包特性如何给循环中的对象添加事件

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  2. 深入理解JavaScript的闭包特性 如何给循环中的对象添加事件(转载)

    原文参考:http://blog.csdn.net/gaoshanwudi/article/details/7355794 初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数 ...

  3. JavaScript的闭包特性如何给循环中的对象添加事件（一）

    初学者经常碰到的,即获取HTML元素集合,循环给元素添加事件.在事件响应函数中(event handler)获取对应的索引.但每次获取的都是最后一次循环的索引.原因是初学者并未理解JavaScript ...

  4. 给ul中的li添加事件的多种方法

    给ul中的li添加事件的多种方法 这是一个常见,而且典型的前端面试题 <ul> <li>11111</li> <li>22222</li> ...

  5. React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路

    React 函数组件中对window添加事件监听resize导致回调不能获得Hooks最新状态的问题解决思路 这几天在忙着把自己做的项目中的类组件转化为功能相同的函数组件,首先先贴一份该组件类组件的关 ...

  6. JQuery中的对象和事件

    一:JQuery 对象和 Dom 对象 在使用 JQuery 过程中,我们一般(也是绝大多数情况下,除非我们使用了第二个框架)只有两类对象,即:JQuery 对象和 Dom 对象.Dom 对象指的是普 ...

  7. OAF TABLE中第一列添加事件不生效

    我遇到一个比较诡异的现象 在TABLE中,我在TABLE的第一列添加了一个MessageCheckBox,并为其设置全局刷新的FireAction事件selection, 但是点击勾选框按钮之后,事件 ...

  8. JavaScript中给对象添加方法

    在JavaScript中,我们经常要给已定义的对象添加一些方法,如下:    function circle(w,h){      this.width=w;      this.height=h; ...

  9. 在CorelDRAW中为对象添加块阴影效果

    我们可以使用CorelDRAW来绘制矢量图形,在勾画出简单的图形后,往往还需要对它们进行一些或简单或复杂的处理,以增加一定的艺术效果.CDR中可供选择的效果有很多,作用的对象可以是文字,也可以是图案. ...

随机推荐

  1. python learning_curve函数

    这个函数需要引用sklearn包 import sklearn from sklearn.learning_curve import learning_curve 这个函数的调用格式是: learni ...

  2. width:100% 和 max-width:100%; 有区别吗【转藏】

    这个博客是基于“Pelican+Markdown+定制的my-gum主题”的.定制的主题将博文正文页面的 右边栏去掉,这导致在Firefox等浏览器中,正文中大的图片会突破正文块的宽度,高度也得不到限 ...

  3. H TML5 之 （6）下雨效果

    在对HTML5进行研究之后,有了一点想法,思考出游戏其实感觉就是四个步骤 1.创建一个你需要的对象,赋予属性(一些影响方法的属性),方法(运动,叫....) 2.实例化这个对象,让它成为一个或者多个个 ...

  4. SQL性能优化没有那么神秘

    经常听说SQL Server最难的部分是性能优化,不禁让人感到优化这个工作很神秘,这种事情只有高手才能做.很早的时候我在网上看到一位高手写的博客,介绍了SQL优化的问题,从这些内容来看,优化并不都是一 ...

  5. 解决IE无法解析json的方法

    一.原始方法eval() 二.json插件--github开源插件:json-js/json2.js https://github.com/douglascrockford/JSON-js/blob/ ...

  6. Object-C — KVO & oc通知

    键值观察(KVO)是基于键值编码的一种技术. 利用键值观察可以注册成为一个对象的观察者,在该对象的某个属性变化时收到通知. 被观察对象需要编写符合KVC标准的存取方法,编写键值观察分为以下三步: (1 ...

  7. storm简介[ZZ]

    场景 伴随着信息科技日新月异的发展,信息呈现出爆发式的膨胀,人们获取信息的途径也更加多样.更加便捷,同时对于信息的时效性要求也越来越高.举个搜索 场景中的例子,当一个卖家发布了一条宝贝信息时,他希望的 ...

  8. Windows phone 之自定义控件（补充）

    <UserControl xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= ...

  9. createjs 下雪 实例

    demo:  http://output.jsbin.com/davixatona <!DOCTYPE html> <html> <head> <meta c ...

  10. 帝国cms7.0修改“信息提示”框

    具体修改查看e/message/index.php文件 上传一张合适用的图 <table width="600" height="224" border= ...