这里是记录一些本人在学习过程中觉得重要的知识点，记录下来以供日后查看，如有不对欢迎指正，望在前端的路上共勉！
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>Document</title> 6 </head> 7 <body> 8 ????<!-- 在页面添加三个按钮 --> 9 ????<input type="button" value="1">10 ????<input type="button" value="2">11 ????<input type="button" value="3">12 13 14 ????<script>15 ????????// 获取页面所有的input16 ????????var aBtn = document.getElementsByTagName(‘input‘);17 18 ????????// 循环绑定点击事件,当然毫无疑问这里点击之后会弹出3，19 ????????//因为我们知道js是单线程的，当基本逻辑语句执行完之后，才会执行点击事件20 ????????//而当你触发点击事件的时候，for循环都已经跑完了，所以i已经变成了3；21 ????????for(var i = 0; i < aBtn.length; i++){22 ????????????aBtn[i].onclick = function(){ 23 ????????????????alert(i);24 ????????????}25 ????????}26 27 ????????// 解决方法1:也是最简单的方法，就是将for循环的var变成let28 ????????//这样当点击每个按钮的时候，就会依次弹出0,1,2；29 ????????//let是ES6新增的一个变量声明方式，拥有块级作用域；30 ????????for(let i = 0; i < aBtn.length; i++){31 ????????????aBtn[i].onclick = function(){ 32 ????????????????alert(i);33 ????????????}34 ????????}35 36 ????????//解决方法2：利用闭包(说是闭包，貌似也不完全是)，也就是函数作用域访问原则的特性37 ????????//函数内部可以访问外部的变量，外部却访问不了里边的；38 ????????for(var i = 0; i < aBtn.length; i++){39 ????????????(function(i){40 ????????????????aBtn[i].onclick = function(){ 41 ????????????????????alert(i);42 ????????????????}43 ????????????})(i);44 ????????}45 ????</script>46 </body>47 </html>当然，这里也不仅仅局限于点击事件，也可以换成setTimeout等也有相同的问题，可以用这两种方法来解决；
JS一个经典闭包问题
原文地址：http://www.cnblogs.com/bsblogs/p/7745514.html