JavaScript闭包示例
在下面的例子中，为什么点击所有的段落p输出都是5，而不是alert出对应的0，1，2，3，4。
<html>
<head>
<meta charset="utf-8" />
<title>闭包演示</title>
<style type="text/css">
p {background:#ccc;}
</style>
<script type="text/javascript">
window.onload = function() {
var arr= document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
arr[i].onclick = function() {
alert(i);
}
}
}
</script>
</head>
<body>
<p>000</p>
<p>111</p>
<p>222</p>
<p>333</p>
<p>444</p>
</body>
</html>
原因是初学者并未理解JavaScript的闭包特性。通过element.onclick=function(){alert(i);}方式给元素添加 点击事件。响应函数function(){alert(i);}中的 i 并非每次循环时对应的 i（如0，1，2，3，4）而是循环后最后 i 的值5。 或者说循环时响应函数内并未能保存对应的值 i，而是最后一次i++的值5。
方法1：将变量 i 保存给在每个段落对象（p）上
window.onload = function(){
var arr = document.getElementsByTagName('p');
for(var i=0; i<arr.length; i++){
arr[i].i= i; //或 arr[i].index = i;
arr[i].onclick = function(){
alert(this.i); //或alert(this.index);
}
}
}
方法2：加一层闭包，i 以函数参数形式传递给内层函数
window.onload = function () {
var arr= document.getElementsByTagName("p");
for( var i=0; i<pAry.length; i++ ) {
(function(arg){
arr[i].onclick = function() {
alert(arg);
};
})(i);//调用时参数
}
}
方法3：将变量 i 保存在匿名函数自身
window.onload = function () {
var arr= document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
(arr[i].onclick = function() {
alert(arguments.callee.i);
}).i = i;
}
}
4、加一层闭包，i 以局部变量形式传递给内层函数
1 window.onload = function () {
var arr= document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
(function () {
var temp = i;//调用时局部变量
arr[i].onclick = function() {
alert(temp);
}
})();
}
}
5、加一层闭包，返回一个函数作为响应事件（注意与2的细微区别）
window.onload = function () {
var arr= document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
arr[i].onclick = function(arg) {
return function() {//返回一个函数
alert(arg);
}
}(i);
}
}
6、用Function实现，实际上每产生一个函数实例就会产生一个闭包
window.onload = function() {
var arr= document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
arr[i].onclick = new Function("alert(" + i + ");"); //new一次就产生一个函数实例
}
}
7、用Function实现，注意与6的区别
window.onload = function() {
var arr= document.getElementsByTagName("p");
for( var i=0; i<arr.length; i++ ) {
arr[i].onclick = Function('alert('+i+')');
}
}
JavaScript闭包示例的更多相关文章
- 一个简单的Javascript闭包示例
//=====用闭包实现函数的Curry化===== //数字求和函数的函数生成器 function addGenerator( num ){ //返回一个简单的匿名函数,求两个数的和,其中第一个数字 ...
- JavaScript 闭包（个人理解）
当function里嵌套function时,内部的function可以访问外部function里的变量.但这不是闭包 function foo(x) { var tmp = 3; function b ...
- 通过示例学习JavaScript闭包
译者按: 在上一篇博客,我们通过实现一个计数器,了解了如何使用闭包(Closure),这篇博客将提供一些代码示例,帮助大家理解闭包. 原文: JavaScript Closures for Dummi ...
- [JavaScript闭包]Javascript闭包的判别，作用和示例
闭包是JavaScript最重要的特性之一,也是全栈/前端/JS面试的考点. 那闭包究竟该如何理解呢? 如果不爱看文字,喜欢看视频.那本文配套讲解视频已发送到B站上供大家参考学习. 如果觉得有所收获, ...
- JavaScript学习总结——我所理解的JavaScript闭包
一.闭包(Closure) 1.1.什么是闭包? 理解闭包概念: a.闭包是指有权限访问另一个函数作用域的变量的函数,创建闭包的常见方式就是在一个函数内部创建另一个函数,也就是创建一个内部函数,创建一 ...
- Javascript闭包和C#匿名函数对比分析
C#中引入匿名函数,多少都是受到Javascript的闭包语法和面向函数编程语言的影响.人们发现,在表达式中直接编写函数代码是一种普遍存在的需求,这种语法将比那种必须在某个特定地方定义函数的方式灵活和 ...
- javascript 闭包最简单理解
首先说3点与闭包有关系的东西. 一.变量的作用域 变量的作用域不难理解. 1.函数内部可以访问函数外部的变量,而函数外部不能访问函数内部的变量. 2.如果在函数内定义变量的时候,不加var,那么是全局 ...
- JavaScript闭包（一）——实现
闭包的官方的解释是:一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分. 通俗点的说法是: 从理论角度:所有的函数.因为它们都在创建的时候就将上层上下文 ...
- 我所理解的JavaScript闭包
目录 一.闭包(Closure) 1.1.什么是闭包? 1.2.为什么要用闭包(作用)? 1.2.1.保护函数内的变量安全. 1.2.2.通过访问外部变量,一个闭包可以暂时保存这些变量的上下文环境,当 ...
随机推荐
- Wireshark技巧-过滤规则和显示规则
Wireshark是一个强大的网络协议分析软件,最重要的它是免费软件. 过滤规则 只抓取符合条件的包,在Wireshark通过winpacp抓包时可以过滤掉不符合条件的包,提高我们的分析效率. 如果要 ...
- Winform控件学习-TreeView - ContextMenuStrip
首先,要向窗体添加一个TreeView控件: 然后再添加一个ContextMenuStrip控件: 接下就要给TreeView添加一个MouseDown事件,代码如下: Example 1 priva ...
- 1257: [CQOI2007]余数之和sum - BZOJ
Description 给出正整数n和k,计算j(n, k)=k mod 1 + k mod 2 + k mod 3 + … + k mod n的值,其中k mod i表示k除以i的余数.例如j(5, ...
- 1067: [SCOI2007]降雨量 - BZOJ
Description 我们常常会说这样的话:“X年是自Y年以来降雨量最多的”.它的含义是X年的降雨量不超过Y年,且对于任意Y<Z<X,Z年的降雨量严格小于X年.例如2002,2003,2 ...
- angular入门系列教程目录
本系列教程的目标很明确,就是入门,会一步一步的从零到最终的能写出一个基本完整的应用.这个过程中不去纠结一些概念或者是如何实现等等深入的东西,只是停留在应用层. ps:如果条件允许的话,后续会有深入一点 ...
- 【BZOJ】【1532】【POI2005】Kos-Dicing
网络流/二分法 最大值最小……直接做不太好做的时候就可以用二分+判定来搞. 这题我们就也可以二分最大胜场v,那么怎么来判定呢?首先我们发现:每场比赛要么A赢,要么B赢,这一点跟二分图匹配非常类似,那么 ...
- 剑指offer--面试题7
//两个栈实现一个队列 #include<stack> //STL #include<iostream> using namespace std; template<cl ...
- HTTP长轮询和短轮询
http 协议介绍: http 协议是请求/响应范式的, 每一个 http 响应都是由一个对应的 http 请求产生的; http 协议是无状态的, 多个 http 请求之间是没有关系的. http ...
- Unity3D开发之“获取IOS设备所在的国家代码"
原地址:http://dong2008hong.blog.163.com/blog/static/469688272014021025578/ 在前一段时间游戏开发中需要实现获取IOS设备所在的国家代 ...
- hbase操作的问题
写了一个java程序,需要向hbase中写入大量的数据,但是这个程序执行一半就报错, 问题是,此时已经写入了很多数据. 查看jps,发现hmaster进程崩溃了. 基于以上信息,发现是在程序中,链接h ...