js 闭包面试题

最新推荐文章于 2024-08-16 22:08:06 发布

原创最新推荐文章于 2024-08-16 22:08:06 发布 · 263 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #javascript

js基础语法专栏收录该内容

2 篇文章

订阅专栏

<body>
<ul class="nav">
    <li>榴莲</li>
    <li>臭豆腐</li>
    <li>鲱鱼罐头</li>
    <li>大猪蹄子</li>
</ul>
<script>
    // 点击li输出当前li的索引号
    // 1.我们可以利用动态添加属性的方式
    var lis = document.querySelector('.nav').querySelectorAll('li');
    for (var i = 0; i < lis.length; i++) {
        // lis[i].index = i;   //  因为， for循环是同步任务，点击事件 function异步任务。要等到for循环执行完（此时经过i++后的i等于4），才执行点击事件。  而每一次点击都会调用这个匿名函数，匿名函数中要引用变量i，但匿名函数中却没有找到，只能向上一层找，就找到了全局变量i，这时经过i++，i已经变成了4。
        lis[i].onclick = function () {
            console.log(i);
            // console.log(this.index);
        }
    }


    //  2. 利用闭包的方式得到当前li的索引号
    for (var i = 0; i < lis.length; i++) {
        // 利用for循环创建了4个立即执行函数
        // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
        (function (i) {
            lis[i].onclick = function () {
                console.log(i);
            }
        })(i);
    }

</script>
</body>