JS基础题补充

场景一：

　　如下代码：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
    </head>
    <body>
        <button>1</button>
        <button>2</button>
        <button>3</button>
    </body>
    <script>
        const btns = document.querySelectorAll('button');
        for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                console.log(btns[i - 1].innerHTML);

            };
        }
    </script>
</html>

问：

　　打印出来的是多少？

答案：3

　　因为点击的时候i已经变成3了，相当于访问全局的i，第四次执行时，才跳出循环

解决：

　　1:使用let

for (let i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                console.log(btns[i].innerHTML); 
　　　　　　　　}; 
　　　　　}

　　2.使用this

for (var i = 0; i < btns.length; i++) {
            btns[i].onclick = function () {
                console.log(this.innerHTML);
            };
        }

　　3:使用闭包

for (var i = 0; i < btns.length; i++) {
            (function (i) {
                btns[i].onclick = function () {
                    console.log(btns[i].innerHTML);
                };
            })(i);
        }

JS基础题补充

推荐阅读