查看“Let 经典案例实践”的源代码

目标：实现点击 div 变颜色<syntaxhighlight lang="javascript">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>let</title>
    <style>
        .item {
            width: 80px;
            height: 40px;
            border: 2px solid black;
            margin-left: 10px;
        }
        .container {
            display: flex;
        }
    </style>
</head>
<body>
    <h2>点击切换颜色</h2>
    <div class="container"> 
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
    <script>
        //获取 div 元素对象
        let items = document.getElementsByClassName('item');

        //遍历并绑定事件
        for (var i = 0; i < items.length; i++) {
            items[i].onclick = function() {
                //修改当前元素的背景颜色
                this.style.background = 'red';
            }
        }

        console.log(i);
        console.log(window.i);

    </script>
</body>
</html>
</syntaxhighlight>能不能用<code>items[i].style.background = 'red';</code>代替<code>this.style.background = 'red';</code>？答案是不行，运行会报错：Cannot read property 'style' of undefined，因为 for 循环里的变量 i 是用 var 声明的，当循环结束时 i 的值是3，var 声明的变量没有块级作用域的概念，所以 var 声明的变量 i 一直是在全局当中存在的，这一点可以通过观察<code>console.log(i);</code>和<code>console.log(window.i);</code>在控制台的输出进行验证。当循环结束后，i 的值就是3了，当点击某个 div 时就会执行回调函数中的代码，也就是定义的 onclick 事件处理程序，这时的 item[i] 要用到 i 的值，但是 i 的值在函数内找不到，就会向外层作用域找，找到 window.i，但此时 window.i 的值为 3，item[3] 访问不到实际 length 为 3 的元素数组中的元素，所以就 undefined 了。实际运行起来就像：<syntaxhighlight lang="javascript">
    <script>
        //获取 div 元素对象
        let items = document.getElementsByClassName('item');

        var i = 0;
        items[i].onclick = function() {
            //修改当前元素的背景颜色
            this.style.background = 'red';
            console.log('i in first function:', i);
            console.log('items[i]:', items[i]);
            items[i].style.background = 'red';
        }
        i++;
        console.log('after first ++:', i);
        items[i].onclick = function() {
            //修改当前元素的背景颜色
            this.style.background = 'red';
            console.log('i in secound function:', i);
            items[i].style.background = 'red';
        }
        i++;
        console.log('after secound ++:', i);
        items[i].onclick = function() {
            //修改当前元素的背景颜色
            this.style.background = 'red';
            console.log('i in third function:', i);
            items[i].style.background = 'red';
        }
        i++;
        console.log('after third ++:', i);
    </script>
</syntaxhighlight><syntaxhighlight lang="console">
after first ++: 1
let实践练习3.html:47 after secound ++: 2
let实践练习3.html:55 after third ++: 3
let实践练习3.html:34 i in first function: 3
let实践练习3.html:35 items[i]: undefined
let实践练习3.html:36 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at items.<computed>.onclick (let实践练习3.html:36:22)
items.<computed>.onclick @ let实践练习3.html:36
let实践练习3.html:43 i in secound function: 3
let实践练习3.html:44 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at items.<computed>.onclick (let实践练习3.html:44:22)
items.<computed>.onclick @ let实践练习3.html:44
let实践练习3.html:51 i in third function: 3
let实践练习3.html:52 Uncaught TypeError: Cannot read properties of undefined (reading 'style')
    at items.<computed>.onclick (let实践练习3.html:52:22)
</syntaxhighlight>此时只需要用 let 来声明 for 循环里的 i