JS闭包以及闭包的应用

最新推荐文章于 2023-10-18 21:38:49 发布

是小佚啊

最新推荐文章于 2023-10-18 21:38:49 发布

阅读量158

点赞数

分类专栏：笔记文章标签： js

本文链接：https://blog.csdn.net/qq_42156918/article/details/108693766

版权

笔记专栏收录该内容

18 篇文章 2 订阅

订阅专栏

闭包

闭包（closure）指有权访问另一个函数作用域中变量的函数

<script>
        //闭包（closure） 指 有权 访问 另一个函数作用域中变量的 函数
        //闭包：fun这个函数作用域 访问了 另一个函数 fn 里面的局部变量 num   fn就是闭包函数
        function fn() {
            var num = 10;

            function fun() {
                console.log(num);
            }
            fun();
        }
        fn();
    </script>

闭包的作用就是延伸变量的作用范围

闭包应用

案例一：循环注册点击事件

<body>
    <ul class="nav">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        //闭包应用——点击li输出当前的li的索引号
        //1.  我们可以利用动态添加属性的方式
        var lis = document.querySelectorAll('li');
        // for (var i = 0; i < lis.length; i++) {
        //     lis[i].index = i;
        //     lis[i].addEventListener('click', function() {
        //         console.log(this.index);
        //     })
        // }
        //2.利用闭包的方式 得到当前的li的索引号
        for (var i = 0; i < lis.length; i++) {
            //利用for循环 创建4个立即执行函数  第一个小括号里是函数 第二个是调用的意思   
            //立即执行函数 也称为 小闭包 因为立即执行函数里面的任何一个函数都可以使用它的i这个变量
            (function(i) {
                // console.log(i);
                lis[i].addEventListener('click', function() {
                    console.log(i);
                })
            })(i);
        }
    </script>
</body>

案例二：循环中的setTimeout()

<body>
    <ul class="nav">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <script>
        //闭包应用——3秒后，打印所有的li元素内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i)
        }
    </script>
</body>

案例三：打车价格

 <script>
        //闭包应用——计算打车价格
        //打车价格起步价：13元（3公里内）  之后的每公里增加5元，用户输入公里数就可以计算打车价格
        //如果有拥堵情况，总价格多收10块钱拥堵费
        var car = (function() {
            var start = 13; //起步价
            var total = 0; //总价
            return {
                //正常的总价
                price: function(n) {
                    if (n <= 3) {
                        total = start;
                    } else {
                        total = start + (n - 3) * 5;
                    }
                    return total;
                },
                //拥堵之后的费用
                congestion: function(flag) {
                    return flag ? total + 10 : total;
                },
            }
        })();

        console.log(car.price(5));
        console.log(car.congestion(true));
        console.log(car.price(1));
        console.log(car.congestion(true));
    </script>
</body>