第二课：函数进阶（五）：闭包的案例（2021/4/19）

最新推荐文章于 2024-07-10 10:00:00 发布

叶川飞流

最新推荐文章于 2024-07-10 10:00:00 发布

阅读量107

点赞数

分类专栏： js视频学习记录

本文链接：https://blog.csdn.net/weixin_41033048/article/details/115865410

版权

js视频学习记录专栏收录该内容

39 篇文章 0 订阅

订阅专栏

案例一：

<body>

        <ul class="nav">
                <li>大猪蹄子</li>
                <li>臭豆腐</li>
                <li>西兰花</li>
                <li>木耳</li>
        </div>
        <script>
                // 1.我们可以利用动态添加属性的方式
                var lis = document.querySelector('.nav').querySelectorAll('li');
                for(var i = 0; i< lis.length;i++){
                        lis[i].index = i;
                        lis[i].onclick = function(){
                                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>
</html>

案例二：

<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;
                                },
                                // 拥堵之后的费用
                                yd:function(flag){
                                        flag ? total + 10 : total;
                                }
                        }
                })();
                console.log(car.price(5)); //23
                console.log(car.yd(true)); //33
        </script>
</body>