js闭包和点击出现相应下标的三种方法

最新推荐文章于 2022-06-19 16:52:34 发布

海龟先生plus

最新推荐文章于 2022-06-19 16:52:34 发布

阅读量563

点赞数 1

分类专栏： js

本文链接：https://blog.youkuaiyun.com/qq_45219069/article/details/97026225

版权

js 专栏收录该内容

70 篇文章

订阅专栏

本文介绍了JavaScript中的闭包概念及其实现方式，并通过实例展示了如何利用闭包实现事件委托，使得代码更加灵活高效。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script>
        //  closure 就是闭包的意思
        //   1.外层函数嵌套内层函数
        //   2.内层函数用外层函数的局部变量
        //   3.外层函数把内层函数作为返回值  

        function foo() {  //外层
            var num = 0//局部变量
            function bar() {  //内层
                num++
                return num
            }
            return bar//把内层函数作为返回值
        }
        var fn = foo()  //foo()------就是bar函数  把这个函数用个变量接收，再加（） 表示函数调用  得到结果
        console.log(fn());//1
        console.log(fn());//2


        //类似事件委托，让被点击的标签出现相应的下标

        //    *1* 自定义属性

        var lis = document.querySelectorAll("li")
        for(var i=0;i<lis.length;i++){
            lis[i].index=i
            lis[i].onclick=function(){
                alert(this.index)//0-4
            }
        }

        //  *2* 使用let，每一次for都是一个块，每个块里面的i都是独立的


        for (let i = 0; i < lis.length; i++) {
            lis[i].onclick = function () {
                alert(i)//0-4
            }
        }

        //  *3*----闭包

        for (var i = 0; i < lis.length; i++) {
            // IIFE（立即执行函数）这个函数执行完成以后用onclick接收返回值
            // onclick绑定的事件时内层返回的这个函数
            lis[i].onclick = (function (index) {
                // index是外层函数的局部变量
                // 内层使用外层局部变量
                // 外层return内层
                // 外层的活动对象不能被释放，所以每一个IIFE都是一个闭包，都有自己的index
                return function () {
                    alert(index)
                }
            })(i)
        }


    </script>
</body>

在这里插入图片描述