有个网友问了个问题，如下的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. jvm--4垃圾收集

    6. 垃圾收集GC (1)当需要排查各种内存溢出,内存泄漏等问题,当GC成为系统达到更高性能的瓶颈时,我们就需要对这些自动化的GC进行监控和调节. (2)PC计数器.本地方法栈.虚拟机栈,随方法或者线 ...

  2. win10 系统亮度调节

    win10系统发行后,许多用户尝试新的系统发现安装之后亮度无法调节,我也多次遇见此情况 故在此记录修改方式: 打开注册表 -> 搜索键值featuretestcontrol -> 修改键值 ...

  3. 使用CSS隐藏HTML元素的4种常用方法

    现在的网页设计越来越动态化,我们经常需要隐藏某些元素,在特定的时候才显示它们.我们通常可以使用4种方法来隐藏和显示元素. 这4种显示和隐藏元素的技术各自有它们自己的优点的缺点,下面来举例说明. 在这篇 ...

  4. linux 下Ｃ++查询mysql数据库

    上一节我们看了怎么使用mysql提供的API来连接mysql数据库,现在来看看怎么执行一条简单的查询语句,并且把查询的结果显示出来. 准备工作:首先新建了一个数据库inote,在这个数据库下面新建了一 ...

  5. iOS9新特性 window决定程序的状态栏管理问题

    Xcode7升级之后遇到的问题   问题一: 老项目在Xcode6上运行没有任何问题,但在Xcode7上运行直接崩了! 经过一波分析: 发现是因为我顶部状态栏处添加了topWindow,用于处理Tab ...

  6. [BZOJ3729]Gty的游戏

    [BZOJ3729]Gty的游戏 试题描述 某一天gty在与他的妹子玩游戏.妹子提出一个游戏,给定一棵有根树,每个节点有一些石子,每次可以将不多于L的石子移动到父节点,询问将某个节点的子树中的石子移动 ...

  7. js面向对象

    什么事面向对象 用对象的思想去写代码,就是面向对象编程 面向对象编程(OOP)的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 多态:多对象的不同形态 对象的 ...

  8. 我的LaTeX中文文档模板

    中文LaTeX处理模板 环境MiTex内核 编辑环境WinEdit 源码如下: \documentclass[a4paper,12pt]{article} \usepackage{CJK} %设定字号 ...

  9. nodejs中npm常用命令

    npm install <name>安装nodejs的依赖包 例如npm install express 就会默认安装express的最新版本,也可以通过在后面加版本号的方式安装指定版本, ...

  10. WPF DataGrid 性能加载大数据

    WPF(Windows Presentation Foundation)应用程序在没有图形加速设备的机器上运行速度很慢是个公开的秘密,给用户的感觉是它太吃资源了,WPF程序的性能和硬件确实有很大的关系 ...