for每次循环都会创建一个独立的作用域，而不是共用一个？

<body>
    <button>0</button>
    <button>1</button>
    <button>2</button>

    <script>
        let btns = document.querySelectorAll('button');
        for (let i = 0; i < btns.length; i++) {

btns[i].addEventListener('click', function () {
console.log(i);
           }, false);
        }

</script>
</body>

输出结果是0,1,2 。起初老师讲解前，我认为这个结果会是 3， 3， 3. 因为一直以来的理解是 for 循环的块级作用域不管循环多少次，都只创建一个作用域。每次循环共享一个作用域。
老师在图解的时候画了3个作用域, 是不是意味着 for 循环中每次循环都会单纯创建一个作用域呢？

Livesinkon 2021-03-05

源自：初识 ES6 3-12 let 和 const 的应用

收起

1回答

好帮手慕张 2021-03-05 18:10:44

同学你好，同学的理解是不准确的，不是for循环能创建独立的作用域，而是let，使用let声明的变量是局部变量，为块级作用域，每次循环都会创建一个新的块级作用域，所以生成的局部变量i分别为1,2,3。如果使用的是var声明变量的时候就是输出3,3,3。

祝学习愉快！

收起回答

帅哥但自卑 #1

每次循环都会创建一个新的块级作用域，所以生成的局部变量i分别为1,2,3----既然生成的都是局部变量，为什么第二次的i能在第一次的i上面递增啊，不是互不影响吗？

2022-12-29 11:47:19
好帮手慕小李回复帅哥但自卑 #2

同学你好，当使用let获取一组button时，循环是按照一组中的下标进行创建出来的作用域。
如下：
此时是获取一组btns。
当btns被for循环时，块级中已经包含了获取到的一组btn，那么相当于i会根据条件btns[i]开始对照btns进行作用域的创建。
同学可以打开控制台打两个断点去观察一下，在结合课程中的视频也许更便于理解。
祝学习愉快！

2022-12-29 14:17:25
帅哥但自卑回复好帮手慕小李 #3

老师，我看了3遍还是没懂你说的是什么意思

2022-12-29 14:25:36