这里是记录一些本人在学习过程中觉得重要的知识点，记录下来以供日后查看，如有不对欢迎指正，望在前端的路上共勉！

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <!-- 在页面添加三个按钮 -->

     <input type="button" value="1">

     <input type="button" value="2">

     <input type="button" value="3">

     <script>

         // 获取页面所有的input

         var aBtn = document.getElementsByTagName('input');

         // 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3，

         //因为我们知道js是单线程的，当基本逻辑语句执行完之后，才会执行点击事件

         //而当你触发点击事件的时候，for循环都已经跑完了，所以i已经变成了3；

         for(var i = 0; i < aBtn.length; i++){

             aBtn[i].onclick = function(){

                 alert(i);

             }

         }

         // 解决方法1:也是最简单的方法，就是将for循环的var变成let

         //这样当点击每个按钮的时候，就会依次弹出0,1,2；

         //let是ES6新增的一个变量声明方式，拥有块级作用域；

         for(let i = 0; i < aBtn.length; i++){

             aBtn[i].onclick = function(){

                 alert(i);

             }

         }

         //解决方法2：利用闭包(说是闭包，貌似也不完全是)，也就是函数作用域访问原则的特性

         //函数内部可以访问外部的变量，外部却访问不了里边的；

         for(var i = 0; i < aBtn.length; i++){

             (function(i){

                 aBtn[i].onclick = function(){

                     alert(i);

                 }

             })(i);

         }

     </script>

 </body>

 </html>

当然，这里也不仅仅局限于点击事件，也可以换成setTimeout等也有相同的问题，可以用这两种方法来解决；

JS一个经典闭包问题的更多相关文章

  1. js经典闭包

    setTimeout函数之循环和闭包 前言 之前对于setTimeout的一个经典问题的理解总是感到很迷惑,现在好像清晰一点了,所以把我的理解写下来,我对js的理解也不深入,如果有错误,请务必指出.以 ...

  2. 详解js中的闭包

    前言 在js中,闭包是一个很重要又相当不容易完全理解的要点,网上关于讲解闭包的文章非常多,但是并不是非常容易读懂,在这里以<javascript高级程序设计>里面的理论为基础.用拆分的方式 ...

  3. 浅谈JS中的闭包

    浅谈JS中的闭包 在介绍闭包之前,我先介绍点JS的基础知识,下面的基础知识会充分的帮助你理解闭包.那么接下来先看下变量的作用域. 变量的作用域 变量共有两种,一种为全局变量,一种为局部变量.那么全局变 ...

  4. 「JavaScript」同步、异步、回调执行顺序之经典闭包setTimeout分析

    聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...

  5. 彻底理解js中的闭包

    闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,那么什么是闭包呢?它又有什么用呢? 我们都知道,js的作用域分两种,全局和局部,基于我们所熟悉的作用域链相关知识,我们知道在js作用 ...

  6. 同步、异步、回调执行顺序之经典闭包setTimeout分析

    聊聊同步.异步和回调 同步,异步,回调,我们傻傻分不清楚, 有一天,你找到公司刚来的程序员小T,跟他说:“我们要加个需求,你放下手里的事情优先支持,我会一直等你做完再离开”.小T微笑着答应了,眼角却滑 ...

  7. JS基础学习——闭包

    JS基础学习--闭包 什么是闭包 闭包的定义如下,它的意思是闭包使得函数可以记住和访问它的词法范围,即使函数是在它声明的词法范围外执行.更简单来讲,函数为了自己能够正确执行,它对自己的词法范围产生闭包 ...

  8. 【学习笔记】深入理解js原型和闭包（15）——闭包

    前面提到的上下文环境和作用域的知识,除了了解这些知识之外,还是理解闭包的基础. 至于“闭包”这个词的概念的文字描述,确实不好解释,我看过很多遍,但是现在还是记不住. 但是你只需要知道应用的两种情况即可 ...

  9. 【学习笔记】深入理解js原型和闭包（10）——this

    接着上一节讲的话,应该轮到“执行上下文栈”了,但是这里不得不插入一节,把this说一下.因为this很重要,js的面试题如果不出几个与this有关的,那出题者都不合格. 其实,this的取值,分四种情 ...

随机推荐

  1. 计蒜客 宝藏 (状压DP)

    链接 : Here! 思路 : 状压DP. 开始想直接爆搜, T掉了, 然后就采用了状压DP的方法来做. 定义$f[S]$为集合$S$的最小代价, $dis[i]$则记录第$i$个点的"深度 ...

  2. windows电脑配置耳机只有一个耳朵响

    也许你在工作,需要一个耳朵听同事的声音,一个耳朵听电脑的音乐,但是又不想另一个耳机头泄露声音,这样就有了想配置只有左/右单个耳机头会响的操作. 那么我们就开始配置吧,我这里以win10为例: 右击桌面 ...

  3. 1.2 为Eclipse绑定Tomcat

    1.window→preferences打开属性窗口 2.点击add 3.点击Tomcat6.0 点击next 4.选择tomcat的解压目录和jdk,并点击finish 5.点击ok 6.打开ser ...

  4. Hibernate 一对多

    表与表之间关系回顾(重点) 1 一对多 (1)分类和商品关系,一个分类里面有多个商品,一个商品只能属于一个分类 (2)客户和联系人是一对多关系 - 客户:与公司有业务往来,百度.新浪.360 - 联系 ...

  5. mysql查询优化--临时表和文件排序（Using temporary; Using filesort问题解决）

    先看一段sql: <span style="font-size:18px;">SELECT * FROM rank_user AS rankUser LEFT JOIN ...

  6. CF409C Magnum Opus

    CF409C Magnum Opus 题意翻译 题目背景 愚人节题目,题面似乎是一位名叫Nicolas Flamel的炼金术士用拉丁文写的某种物质的配方,结合谷歌尝试翻译了一下: 吾友: 哲人石所言不 ...

  7. Quartz.Net 使用心得（一）

    最近工作内容与定时任务相关,在实际使用Quartz过程中,有两个小问题较为困扰. 一.多个Trigger如何触发一个Job. 比如上下班打卡时推送消息,上班时间为9:30,打卡提醒时间为9:20较好. ...

  8. [HTML 5] Styling with ARIA

    See if you can do a better job styling this button using ARIA states. One huge benefit to styling wi ...

  9. iframe是否缓存页面探究

    近期手里有个项目须要用iframe来调用每天都会变化的页面,后来想到iframe会不会缓存页面呢.于是写了个demo论证了下,结果例如以下: iframe的src假设是静态页面,就有可能会缓存.由于静 ...

  10. javaScript实现日历控件

    近期学习js.闲来无事就写了个简单的日历控件.不知道别人是怎么实现的.纯粹自己想法写的, 写的不好 ,但能够起到抛砖引玉的作用. 先来看效果. watermark/2/text/aHR0cDovL2J ...