JS一个经典闭包问题
Posted 愫幕
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS一个经典闭包问题相关的知识，希望对你有一定的参考价值。
这里是记录一些本人在学习过程中觉得重要的知识点，记录下来以供日后查看，如有不对欢迎指正，望在前端的路上共勉！
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 // 获取页面所有的input
16 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变成let
28 //这样当点击每个按钮的时候，就会依次弹出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一个经典闭包问题的主要内容，如果未能解决你的问题，请参考以下文章