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.通过访问外部变量,一个闭包可以暂时保存这些变量的上下文环境,当 ...
随机推荐
- Codeforces Round #130 (Div. 2) A. Dubstep
题目链接: http://codeforces.com/problemset/problem/208/A A. Dubstep time limit per test:2 secondsmemory ...
- 剑指offer--面试题6
题目:由前序.中序遍历序列重建二叉树 虽然思路能想到,但是实际写却无从下手...下面重现作者代码,多多实践... #include<exception> //首先定义二叉树节点 struc ...
- C#枚举注释实例
public enum 枚举名称 { /// <summary> /// 注释描述1 /// </summary> ...
- VC6.0环境安装STLport-5.2.1
今天安装STLport,网上搜资料安装好久,都不行,因为STLport 的版本不对,我这是STLport-5.2.1新版本. (注意:下面的步骤都在一个cmd里操作,很简单的原因:环境变量啊) 1.首 ...
- spoj 138
离散化 去掉重复点 排序 二分查找 #include<cstdio> #include<cstring> #include<algorithm> #define ...
- asp.net 获取客户机IP地址
/// <summary> ///get client IP /// </summary> /// <returns></returns> public ...
- python库：fuzzywuzzy
fuzzywuzzy 用于字符串匹配率.令牌匹配等 复制代码代码如下: from fuzzywuzzy import fuzzfuzz.ratio("Hit me with your bes ...
- Understanding and Using Servlet Filters
Overview of How Filters Work This section provides an overview of the following topics: How the Serv ...
- CF 295A Greg and Array （两次建树，区间更新，单点查询）
#include <iostream> #include <stdio.h> #include <string.h> #include <algorithm& ...
- TortoiseSVN文件夹及文件图标不显示解决方法(转发)
地址:http://blog.csdn.net/lishehe/article/details/8257545 由于自己的电脑是win7(64位)的,系统安装TortoiseSVN之后,其他的功能都能 ...