有个网友问了个问题，如下的html，为什么每次输出都是5

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

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. }

from:http://zhouyrt.javaeye.com/blog/250073

js闭包演示的更多相关文章

  1. js 闭包演示

    function test2() { var scope = "global scope"; var f = enclose(scope); scope = 'aaa'; aler ...

  2. js闭包中的this（匿名函数中的this指向的是windows）

    js闭包中的this(匿名函数中的this指向的是windows) 一.总结 1.普通函数中的this指向的是对象,匿名函数中的this指向的是windows,和全局变量一样 2.让匿名函数中的thi ...

  3. js闭包作用（避免使用全局变量）

    js闭包作用(避免使用全局变量) 一.总结 1.优点::可以把局部变量驻留在内存中,可以避免使用全局变量; 2.缺点:也有占用更多内存的缺点,用完要及时让垃圾回收器回收  fn=null //应及时解 ...

  4. js闭包（函数内部嵌套一个匿名函数：这个匿名函数可将所在函数的局部变量常驻内存）

    js闭包(函数内部嵌套一个匿名函数:这个匿名函数可将所在函数的局部变量常驻内存) 一.总结 1.闭包:就是在一个函数内部嵌套一个匿名函数,这个匿名函数可以访问这个函数的变量. 二.要点 闭包 闭包的相 ...

  5. js 闭包 理解

    1.什么是闭包 定义:是指有权访问另一个函数作用域中的变量的函数 创建闭包:在一个函数内部创建另一个函数 基本特点 在返回的匿名函数中 可以调用外部函数的变量 如下例中所示 内部函数(匿名函数) 可以 ...

  6. js闭包的作用域以及闭包案列的介绍：

    转载▼ 标签: it   js闭包的作用域以及闭包案列的介绍:   首先我们根据前面的介绍来分析js闭包有什么作用,他会给我们编程带来什么好处? 闭包是为了更方便我们在处理js函数的时候会遇到以下的几 ...

  7. 大部分人都会做错的经典JS闭包面试题

    由工作中演变而来的面试题 这是一个我工作当中的遇到的一个问题,似乎很有趣,就当做了一道题去面试,发现几乎没人能全部答对并说出原因,遂拿出来聊一聊吧. 先看题目代码: function fun(n,o) ...

  8. Js闭包常见三种用法

        Js闭包特性源于内部函数可以将外部函数的活动对象保存在自己的作用域链上,所以使内部函数的可以将外部函数的活动对象占为己有,可以在外部函数销毁时依然存有外部函数内的活动对象内容,这样做的好处是可 ...

  9. js闭包之初步理解（ JavaScript closure）

    闭包一直是js中一个比较难于理解的东西,而平时用途又非常多,因此不得不对闭包进行必要的理解,现在来说说我对js闭包的理解. 要理解闭包,肯定是要先了解js的一个重要特性, 回想一下,那就是函数作用域, ...

随机推荐

  1. python中不同包之间调用方法、

    在pycharm中... 当两个py文件在同一个文件夹下的时候.直接from 文件名 import *  即可 当两个文件在不同的文件夹下的时候.需要在文件中加入 _init_.py 文件.里面可以什 ...

  2. Linux学习之十--.Net Core环境搭建以及Nginx的搭建

    一.Centos7下.Net Core 环境安装: 链接:https://www.microsoft.com/net/core#linuxcentos 按照步骤来: yum install libun ...

  3. Jni 调试 ： eclipse + Vs 联合调试

    摘要: 本文原创,转载请注明地址 http://www.cnblogs.com/baokang/p/4982640.html 1.在Eclipse 中,Java 类中链接库引用到vs的debug目录下 ...

  4. POJ 2226二分图最大匹配

    匈牙利算法是由匈牙利数学家Edmonds于1965年提出,因而得名.匈牙利算法是基于Hall定理中充分性证明的思想,它是二部图匹配最常见的算法,该算法的核心就是寻找增广路径,它是一种用增广路径求二分图 ...

  5. 微软往年校招招面试题AC全解。

    因为4月初要参加微软的online.所以今天把微软的面试题拿出来做了,自己解答了题目.下面附上我的解答代码. -----------16年9月校招:  第一道题:Farthest Point(最远的整 ...

  6. js_原型

    原型是JavaScript中一个比较难理解的概念,原型相关的属性也比较多,对象有"prototype"属性,函数对象有"prototype"属性,原型对象有&q ...

  7. expect

    #!/usr/bin/expect -fset ipaddr "192.168.5.4"set passwd "123qwe"set timeout 30 sp ...

  8. Guidance of Set up FTP Server

    Step 1. Create a FTP folder in your C disk, named "FTPReport"(an example) Step 2. Install ...

  9. [Android Pro] 精确记录和恢复ListView滑动位置

    reference to : http://blog.csdn.net/welovesunflower/article/details/7926512 工作中遇到一个需求,对ListView某一项操作 ...

  10. iscroll.js 下拉刷新和上拉加载

    html代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> < ...