06 —— 高阶函数 + 闭包(closure) chrome中调试 + 闭包应用-计算打车价格

最新推荐文章于 2022-08-16 16:49:16 发布

xumengxia—xu

最新推荐文章于 2022-08-16 16:49:16 发布

阅读量460

点赞数

分类专栏： js JS(javascript)面向对象文章标签： javascript css html5

本文链接：https://blog.csdn.net/qq_56514785/article/details/120363329

版权

js 同时被 2 个专栏收录

20 篇文章 0 订阅

订阅专栏

JS(javascript)面向对象

10 篇文章 0 订阅

订阅专栏

1.高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出

2.调试里面 Sources 打断点 Scope(作用域)里面 Global(全局作用域) Local(局部作用域) closure(闭包)

1. 闭包是什么？ 
闭包是一个函数 （一个作用域可以访问另外一个函数的局部变量）
2. 闭包的作用是什么？
延伸变量的作用范围

<style>
        div {
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        // 高阶函数- 函数可以作为参数传递
        function fn(a, b, callback) {
            console.log(a + b);
            callback && callback();
        }
        fn(1, 2, function() {
            console.log('我是最后调用的');

        });
        $("div").animate({
            left: 500
        }, function() {
            $("div").css("backgroundColor", "purple");
        })
    </script>

2.闭包 —— 闭包的主要作用: 延伸了变量的作用范围

闭包（closure）指有权访问另一个函数作用域中变量的函数。 ----- JavaScript 高级程序设计

简单理解就是，一个作用域可以访问另外一个函数内部的局部变量。

 // 闭包（closure）指有权访问另一个函数作用域中变量的函数。
        // 闭包: 我们fun 这个函数作用域 访问了另外一个函数 fn 里面的局部变量 num
        function fn() {    // fn就是闭包
            var num = 10;

            function fun() {
                console.log(num);

            }
            fun();
        }
        fn();

利用闭包的方式得到当前小li 的索引号

ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        // 闭包应用-点击li输出当前li的索引号
        // 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(i);
                console.log(this.index);

            }
        }
        // 2. 利用闭包的方式得到当前小li 的索引号
        for (var i = 0; i < lis.length; i++) {
            // 利用for循环创建了4个立即执行函数
            // 立即执行函数也成为小闭包因为立即执行函数里面的任何一个函数都可以使用它的i这变量
            (function(i) {
                // console.log(i);
                lis[i].onclick = function() {
                    console.log(i);
                }
                // 定时器
                setTimeout(function() {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }

2.闭包应用-计算打车价格

// 闭包应用-计算打车价格 
        // 打车起步价13(3公里内),  之后每多一公里增加 5块钱.  用户输入公里数就可以计算打车价格
        // 如果有拥堵情况,总价格多收取10块钱拥堵费
        // function fn() {};
        // fn();
        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)); // 23
        console.log(car.yd(true)); // 33

        console.log(car.price(1)); // 13
        console.log(car.yd(false)); // 13

xumengxia—xu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
06 —— 高阶函数 + 闭包(closure) chrome中调试 + 闭包应用-计算打车价格

1.高阶函数是对其他函数进行操作的函数，它接收函数作为参数或将函数作为返回值输出2.调试里面 Sources 打断点 Scope(作用域)里面 Global(全局作用域) Local(局部作用域) closure(闭包)<style> div { position: absolute; width: 100px; height: 100px; background-...
复制链接

扫一扫

专栏目录