07-闭包

一、变量作用域

  <script>
    <!-- 
    变量根据作用域分为两种：全局变量和局部变量
    1.函数内可以使用全局变量
    2.函数外部不可以使用局部变量
    3.函数执行完毕,本作用域的局部变量会销毁
   -->
    <!-- 闭包(closure)指有权访问另一个函数作用域中变量的函数 -->
    <!-- 什么是闭包?
    简单理解就是,一个作用域可以访问另外一个函数内部的局部变量
  -->
    <script>
        //闭包:fun()这个函数作用域 访问了fn()函数里面的局部变量num
        function fn() { //fn为变包函数
            var num = 10;

            function fun() {
                console.log(num);
            }
            fun()
        }
        fn()
    </script>

二、闭包的作用

    <script>
        //fn外面的作用域可以访问fn内部的局部变量
        //闭包的主要作用：延伸了变量的作用范围
        function fn() {
            var num = 10

            function fun() {
                console.log(num);
            }
            return fun;
        }
        var f = fn();
        f();
        //类似于
        //var f = function fun(){
        // console.log(num);
        // }
    </script>

三、闭包应用

    <ul class="nav">
        <li>南京</li>
        <li>青岛</li>
        <li>长沙</li>
        <li>重庆</li>
    </ul>
    <script>
        //闭包应用 点击li输出当前li的索引号
        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的索引号
        //立即执行函数也称为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i变量
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                lis[i].onclick = function() {
                    console.log(i);
                }
            })(i)
        }
    </script>

四、定时器中的闭包

   <ul class="nav">
        <li>南京</li>
        <li>青岛</li>
        <li>长沙</li>
        <li>重庆</li>
    </ul>
    <script>
        //获取li标签
        var lis = document.querySelector('.nav').querySelectorAll('li')
            // console.log(lis);

        //3秒钟之后 打印所有li标签内容
        for (var i = 0; i < lis.length; i++) {
            (function(i) {
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i)
        }
    </script>

五、闭包应用

    <!-- 
    打车起步价13(3公里内) 之后每多一公里增加5块钱 用户输入公里数就可以计算打车价格
    如果有拥堵情况 总价格多收取10块钱费用
   -->
    <div>
        打车公里数:<input type="text"> <br/>
        <p>打车费用</p>
    </div>
    <script>
        var inp = document.querySelector('input');
        var p = document.querySelector('p')
        var car = (function() {
            var start = 13; //起步价
            var total = 0; //总价
            return {
                price: function(m) {
                    if (m <= 3) {
                        total = start
                    } else {
                        total = start + (m - 3) * 5
                    }
                    return total;
                }, //正常的总价
                yd: function(flag) { //拥堵
                    return flag ? total + 10 : total
                }
            }
        })()
        inp.onblur = () => {
            p.innerHTML = "打车费用" + ""
            car.price(inp.value)
            var prices = car.yd(false)
            p.innerHTML = p.innerHTML + prices
        }
    </script>

六、思考题

    <script>
        var name = "The Window"
        var object = {
            name: 'My Object',
            getNameFunc: function() {
                return function() {
                    console.log(this);
                    return this.name;
                }

            }
        }
        console.log(object.getNameFunc()());
        // var f = object.getNameFunc()
        // f = function() {
        //     return this.name
        // }
        //f() == object.getNameFunc()()
    </script>
    <!-- <script>
        var name = "The Window"
        var object = {
            name: 'My Object',
            getNameFunc: function() {
                var that = this
                return function() {
                    return that.name;
                }

            }
        }
        console.log(object.getNameFunc()());
    </script> -->