2.38.1-閉包練習

練習一：單擊li 打印每個li的序號

<ul class="nav">
        <li>北京</li>
        <li>上海</li>
        <li>深圳</li>
    </ul>
    <script>
        // 單擊li 打印每個li的序號
        var lis = document.querySelector('ul.nav').querySelectorAll('li');
        /* 思路一 動態添加屬性
        for(var i = 0; i < lis.length; i++) {
            lis[i].index = i;
            lis[i].onclick = function() {
                console.log(this.index);
            }
        }
        */
      //思路二閉包
        for(var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                   console.log(i);
                } 
            })(i);
        } 
         
        /* 思路三 es6 let 
        for(let i = 0; i < lis.length; i++) {   
            lis[i].onclick = function() {
                console.log(i);
            } 
        } 
        */

練習二： 3秒後 打印每個列的內容

        for(var i = 0; i < lis.length; i++) {
            // 閉包
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                },3000);
            })(i);  
        }

練習三：滴滴打車 3公里以內 14 每增加1公里收5元；堵車 在原來收費上多收5元

        var c = (function() {
            var base = 14;
            var sum = 0;
            return {
                //閉包
                normal: function(n) {
                    if (n <= 3) {
                        sum = base;
                    } else {
                        sum = base + (n - 3) * 5;
                    }
                    return sum;
                },
                //閉包
                yj: function(flag) {
                    return flag ? sum + 5 : sum
                }
            }
        })();
        c.normal(5);
        console.log(c.yj(false));