闭包

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

一个函数作用域可以访问另一个函数局部变量，延长变量的作用范围

// 1.闭包（closure）指有权访问另一个函数作用域中变量的函数
            // 一个函数作用域可以访问另一个函数局部变量
            function fn(){
                var num=10;
                function fun(){
                    console.log(num)
                }
                fun()
            }
            fn()

2.利用闭包打印当前小li的索引号

核心思路：利用一个小闭包，立即执行函数，将需要的变量当参数传进去，立即执行函数里面的所有函数都可以使用这个变量

<body>
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
            <li>梨</li>
        </ul>
        <script>
            // // 1.动态获取当前小li的索引号
            // var lis=document.querySelector('ul').querySelectorAll('li')
            // for(var i=0;i<lis.length;i++){
            //     lis[i].index=i
            //     lis[i].onclick=function(){
            //         console.log(this.index)
            //     }
            // }
            
            // 2.使用闭包的方式获取当前小li的索引号,可能会导致内存泄露
            var lis=document.querySelector('ul').querySelectorAll('li')
            for(var i=0;i<lis.length;i++){
                (function(i){
                    lis[i].onclick=function(){
                        console.log(i)
                    }
                })(i)
            }
        </script>
    </body>

 3.利用闭包计算打车价格

// 3.利用闭包计算打车价格
            // 打车起步价5（3公里内），之后每多一公里增加2块钱，用户输入公里即可计算出价格
            // 如果拥堵情况，总价格多收5块钱拥堵费
            
                    var car = (function() {
                        var start = 5;
                        var total = 0;
                        return {
                            price: function(n) {
                                if (n <= 3) {
                                    total = start;
                                } else {
                                    total = start + (n - 3) * 2;
                                }
                                return total;
                            },
                            yd: function(flag) {
                                return flag ? total + 5 : total;
                            }
                        }
                    })();
                    console.log( car.price(3))
                    console.log(car.yd(true))

 

posted @ 2023-01-28 15:23  采姑娘的小蘑菇呀  阅读(20)  评论(0)    收藏  举报