对闭包的理解

对闭包的理解

闭包定义

闭包是指有权访问另一个函数作用域的变量的函数。----《javaScript高级程序设计》

闭包的主要作用

延伸了变量的作用范围。

闭包的应用

1. 利用闭包的方式获取索引号

<ul>
        <li>我的索引为0</li>
        <li>我的索引为1</li>
        <li>我的索引为2</li>
        <li>我的索引为3</li>
    </ul>

 var lis = document.querySelector('ul').querySelectorAll('li')
    for (var i = 0; i < lis.length; i++) {
      // 利用for循环创建了4个立即执行函数
     // 立即执行函数也成为小闭包，因为立即执行函数里面的任何一个函数都可以使用它的i这变量
        (function (i) {
            lis[i].onclick = function () {
                console.log(i)
            }
        })(i)
    }

2. 利用定时器setTimeout打印所有li元素的内容

<ul>
        <li>我的索引为0</li>
        <li>我的索引为1</li>
        <li>我的索引为2</li>
        <li>我的索引为3</li>
    </ul>

var lis = document.querySelector('ul').querySelectorAll('li')
     for (var i = 0; i < lis.length; i++) {
         (function (i) {
             setTimeout(() => {
                 console.log(lis[i].innerHTML)
             }, 3000)
         })(i)
     }

3. 计算打车价格

// 起步价13块（3公里内），之后每增加1公里多加5块，用户输入公里数即可计算打车价格
    // 如果有拥堵情况，需要在总价格的基础上增加10块拥堵费
    const amount = (function () {
        var start = 13 // 起步价 局部变量
        var total = 0 // 总价 局部变量
        return {
            // 正常的价格
            price: function (n) {
                if (n < 3 && n > 0) {
                    total = 13
                } else if (n > 3) {
                    total = start + (n - 3) * 5
                }
                return total
            },
            // 拥堵之后的费用
            crowded: function (flag) {
                return flag ? total = total + 10 : total
            }
        }

    })()
    console.log(amount.price(1)) // 13
    console.log(amount.price(5)) // 23
    console.log(amount.crowded(true)) // 33