一、闭包

1.1、说明

变量根据作用域的不同分为两种：全局变量和局部变量。

函数内部可以使用全局变量。
函数外部不可以使用局部变量。
当函数执行完毕，本作用域内的局部变量会销毁。

1.2、什么是闭包

# 闭包（closure）
	指有权访问另一个函数作用域中变量的函数，闭包是一个函数。指的是可以访问另一个函数作用域中变量的函数。
	
# 简单理解就是 
	一个作用域可以访问另外一个函数内部的局部变量。

<body>
    <script>
        // fn1 就是闭包函数
        function fn1() {
            var num = 10;

            function fn2() {
                console.log(num);
            };

            fn2();
        }
        fn1();
        
        // 总结: fn2 这个函数作用域 访问了另外一个函数 fn1 里面的局部变量 num
    </script>
</body>

0125

1.3、闭包的作用

1.3.1、问题引入

我们怎么能在 fn() 函数外面访问 fn() 中的局部变量 num 呢？例如：

<body>
    <script>
        function fn1() {
            var num = 10;
        }

        // 在此处想访问到 fn1 函数中的 num变量？
    </script>
</body>

1.3.2、实现

我们可以返回一个函数，在这个函数中去访问num的数据。

<body>
    <script>
        function fn1() {
            var num = 10;

            return function() {
                console.log(num);
            }
        }

        // 调用完 fn1 函数之后, 会得到一个结果，这个结果是一个函数
        var func = fn1();

        // 调用函数
        func();
        
       	// <===> 等同于

        var func = function() {
            console.log(num);
        }

        func();

        // 总结: 在此处就访问到了 fn1 函数中的 num 的值。
    </script>
</body>

1	# 闭包作用：延伸变量的作用范围。

1.4、闭包案例

1.4.1、案例1

点击li输出索引号。

<body>
    <ul>
        <li>赵敏</li>
        <li>张无忌</li>
        <li>周芷若</li>
        <li>金毛狮王</li>
    </ul>
    <script>
        // 点击li输出当前li的索引号
        // >> 方式一: 我们可以利用动态添加属性的方式

        // 1、获取所有的li
        var liObjs = document.querySelector("ul").querySelectorAll("li");
        // 2、遍历li绑定事件
        for (var i = 0; i < liObjs.length; i++) {

            // 为当前节点动态添加属性
            liObjs[i].index = i;
            liObjs[i].onclick = function() {
                console.log(this.index);
            }
        }
    </script>
</body>

<body>
    <ul>
        <li>赵敏</li>
        <li>张无忌</li>
        <li>周芷若</li>
        <li>金毛狮王</li>
    </ul>
    <script>
        // 点击li输出当前li的索引号
        // >> 方式二: 闭包的方式得到当前li 的索引号

        // 1、获取所有的li
        var liObjs = document.querySelector("ul").querySelectorAll("li");
        // 2、遍历li绑定事件
        for (var i = 0; i < liObjs.length; i++) {
            // >> 2.1 利用for循环创建了4个立即执行函数
            // >>     立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                liObjs[i].onclick = function() {
                    console.log(i);
                }
            })(i);
        }
    </script>
</body>

1.4.2、案例2

定时器中的闭包。

<body>
    <ul>
        <li>赵敏</li>
        <li>张无忌</li>
        <li>周芷若</li>
        <li>金毛狮王</li>
    </ul>
    <script>
        // 3秒钟之后,打印所有li元素的内容

        // 1、获取所有的li
        var liObjs = document.querySelector("ul").querySelectorAll("li");
        // 2、遍历li绑定事件
        for (var i = 0; i < liObjs.length; i++) {
            // >> 2.1 利用for循环创建了4个立即执行函数
            // >>     立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                setTimeout(function() {
                    console.log(liObjs[i].innerHTML);
                }, 3000)
            })(i);
        }
    </script>
</body>

1.4.3、案例3

计算打车价格。

<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) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        console.log(car.price(5));
        console.log(car.yd(true));
    </script>
</body>