闭包允许内层函数引用父函数中的变量，但是该变量是最终值

今天在学习JavaScript的时候碰到的一个类似于如下代码的问题：

/*** <body>* <ul>*     <li>one</li>*     <li>two</li>*     <li>three</li>*     <li>one</li>* </ul>*/var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){lists[ i ].onmouseover = function(){alert(i);    };
}

　　在函数执行时，会发现弹窗显示的值总是4（即：父函数中的循环变量i的最终值），而不是我们期望的0,1,2,3.原因是：当mouseover事件调用监听函数时，首先在匿名函数（ function(){ alert(i); }）内部查找是否定义了 i，结果是没有定义；因此它会向上查找，查找结果是已经定义了，并且i的值是4（循环后的i值）；所以，最终每次弹出的都是4。

可能的解决办法如下[1]：

//method 1var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){(function(index){lists[ index ].onmouseover = function(){alert(index);    };                    })(i);
}

//method 2var lists = document.getElementsByTagName('li');
for(var i = 0, len = lists.length; i < len; i++){lists[ i ].$$index = i;    //通过在Dom元素上绑定$$index属性记录下标lists[ i ].onmouseover = function(){alert(this.$$index);    };
}

//method 3function eventListener(list, index){list.onmouseover = function(){alert(index);};
}
var lists = document.getElementsByTagName('li');
for(var i = 0 , len = lists.length ; i < len ; i++){eventListener(lists[ i ] , i);
}

以上方法中，method 1 亲自测试可用,且推荐使用该方法。

Reference　　

[1] JavaScript中的匿名函数及函数的闭包 http://www.cnblogs.com/rainman/archive/2009/05/04/1448899.html

转载于:https://www.cnblogs.com/jiayouwyhit/p/3967246.html

闭包允许内层函数引用父函数中的变量，但是该变量是最终值相关推荐

R语言使用table函数统计dataframe数据中的离散变量（分类变量、因子变量）数据列的每一种水平的统计计数
R语言使用table函数统计dataframe数据中的离散变量(分类变量.因子变量)数据列的每一种水平的统计计数目录
子函数和父函数(交换函数）_孤单--剪影_新浪博客
交换函数几种方式: 1.void Swap(int a,int b)<<font color="#4d6df3">错误> { int tmp; tmp=a ...
python中变量和函数的区别_python中带下划线的变量和函数的意义
Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下,不同程序员编写的 Python 代码可以保持最大程度的相似风格.这样就易于阅读, ...
python中一个对象只能被一个变量引用吗_Python中for循环里的变量无法被引用的解决方法...
在之前的编程语言里,学到for循环里面是可以重置变量i的值的,然后让整个for循环从头开始,但是在python里面却行不通这是为什么呢? 在python中,for循环相当于一个迭代器(Iterator ...
【Kotlin】Kotlin 函数总结 ( 具名函数 | 匿名函数 | Lambda 表达式 | 闭包 | 内联函数 | 函数引用 )
文章目录一.函数头声明二.函数参数 1.默认参数值 2.具名参数三.Unit 函数四.TODO 函数抛出异常返回 Nothing 类型五.反引号函数名六.匿名函数七.匿名函数的函数类型 ...
Javascript 学习笔记 - 函数 - 关于IIFE - 关于函数声明和函数表达式 - 个人总结
一切起源于一段代码(近来学完java基础开始学习敲一下javascript): var getter = function(){var dayNames=["Sunday",&q ...
汇编和c语言函数的参数,C函数与汇编函数之间参数及返回值传递方法
AAPCS对ARM结构的一些标准做了定义,在这里我们只重点介绍函数调用部分,如图8所示,AAPCS为ARM的R0~R15寄存器做了定义,明确了它们在函数中的职责: 图 8 AAPCS关于ARM寄存器的 ...
python中闭包函数_Python的闭包问题（关于内嵌函数引用闭包函数的变量问题）
一.闭包: 记得:闭包的特性就是:内嵌函数会保存它引用的外围函数的变量值. 闭包概念:在一个内部函数中,对外部作用域的变量进行引用,(并且一般外部函数的返回值为内部函数),那么内部函数和被引用的变量等 ...
matlab中circle函数_JavaScript碎片——函数闭包（模拟面向对象）
经过这几天的博客浏览,让我见识大涨,其中有一篇让我感触犹深,JavaScript语言本身是没有面向对象的,但是那些大神们却深深的模拟出来了面向对象,让我震撼不已.本篇博客就是在此基础上加上自己的认知, ...

闭包允许内层函数引用父函数中的变量，但是该变量是最终值

闭包允许内层函数引用父函数中的变量，但是该变量是最终值相关推荐

最新文章

热门文章