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

比眉伴天荒 2023-01-13 15:57 129阅读 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>