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一个经典闭包问题的主要内容,如果未能解决你的问题,请参考以下文章

JS一个经典闭包问题

几个关于js数组方法reduce的经典片段

JS之经典for循环闭包问题解决方法

几个关于js数组方法reduce的经典片段

JS---闭包

解析js中作用域闭包——从一道经典的面试题开始