ES6-----读完必懂的let块级作用域

 <div>
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        var items=document.getElementsByClassName('item');
        for(var i=0;i<items.length;i++){
            items[i].onclick=function(){
                items[i].style.backgroundColor='pink';
            }
        }
    </script>

 错误提示：

改错方法：将var i改为let i即可，也许很多人知道如何改，但是却没有真正理解为什么这样改，这样做可以确保在每次点击事件触发时，变量i都会被重新声明和赋值。下面给大家详细解释一下。

以上报错代码执行顺序：

当使用var关键字声明变量时，代码执行顺序如下：

1. 变量声明提升：变量声明会被提升到所在作用域的顶部。在循环开始之前，变量i会被声明，并且初始值为undefined。
2. 循环开始：循环条件判断是否满足，如果满足则执行循环体，否则跳出循环。
3. 循环体执行：执行循环体内的代码，包括嵌套的点击事件。
4. 点击事件绑定：每次循环都会为元素绑定一个点击事件。
5. 循环迭代：执行循环迭代操作，i的值增加。
6. 回到步骤2，继续判断循环条件。

在这个过程中，循环和点击事件是交替执行的。每次循环迭代都会为元素绑定一个点击事件，但是点击事件不会立即执行。只有当用户触发点击事件时，相应的点击事件才会执行。

由于var声明的变量具有函数作用域，而不是块级作用域，所以在循环中使用var声明的变量i在整个循环过程中都是同一个变量。因此，当点击事件触发时，会访问到循环结束后的最终值。

更改后的代码执行顺序：

使用let关键字会将变量的作用域限制在for循环的每次迭代中，而不是整个循环。