js学习笔记--闭包的应用

最新推荐文章于 2023-07-27 14:23:45 发布

金小壮

最新推荐文章于 2023-07-27 14:23:45 发布

阅读量225

点赞数 7

分类专栏： js学习笔记 js面试题《JavaScript核心技术开发解密》文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/dairen_j/article/details/108733116

版权

js学习笔记同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

js面试题

11 篇文章 0 订阅

订阅专栏

《JavaScript核心技术开发解密》

4 篇文章 1 订阅

订阅专栏

闭包的应用

什么是闭包：闭包（closure）指有权访问另一个函数作用域中变量的函数，一个作用域可以访问另外一个函数的局部变量

闭包的作用：延长变量的作用范围

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

思路：

页面中定义一个li列表
获取li的集合，进行遍历，为每个li绑定点击事件，打印当前li的索引
在循环内，创建立即执行函数，立即执行函数内部是包裹着点击事件的，自执行函数的参数是for循环变量

代码块：


<body>
    <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++) {
            //利用for循环创建了四个立即执行函数
            //立即执行函数称为小闭包,因为立即执行函数里的任意一个函数都可以使用i这个变量
            (function (i) {
                // console.log(i);
                lis[i].onclick = function () {
                    console.log(i);
                }
            })(i);
        }
    </script>
</body>

执行结果：

依次点击后结果

2. 闭包应用-三秒钟后打印li的内容

思路：

页面中定义一个li列表
获取li的集合，进行遍历，打印当前li内容
在循环内，创建立即执行函数，立即执行函数内部是包裹着延时器的函数，自执行函数参数是for循环的变量

代码块：

<body>
    <ul class="nav">
        <li>榴莲</li>
        <li>臭豆腐</li>
        <li>鲱鱼罐头</li>
        <li>大猪蹄子</li>
    </ul>
    <script>
        //闭包应用-3秒之后打印所有li元素的内容
        var lis = document.querySelector('.nav').querySelectorAll('li');
        for (var i = 0; i < lis.length; i++) {
            (function (i) {
                setTimeout(function () {
                    console.log(lis[i].innerHTML);
                }, 3000)
            })(i);
        }
    </script>
</body>

执行结果：
三秒后打印得到的结果

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(1)); //13
        console.log(car.yd(false)); //13

        console.log(car.price(5)); //23
        console.log(car.yd(true)); //33
    </script>
</body>

执行结果：
在这里插入图片描述

闭包总结

1. 什么是闭包：

	闭包是一个函数（一个作用域可以访问另一个函数的变量）

2. 闭包的作用是什么：

	延伸变量的作用范围

金小壮

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js学习笔记--闭包的应用

闭包的应用什么是闭包：闭包（closure）指有权访问另一个函数作用域中变量的函数，一个作用域可以访问另外一个函数的局部变量闭包的作用：延长变量的作用范围1. 利用闭包的方式得到当前li的索引号思路：页面中定义一个li列表获取li的集合，进行遍历，为每个li绑定点击事件，打印当前li的索引在循环内，创建立即执行函数，立即执行函数内部是包裹着点击事件的，自执行函数的参数是for循环变量代码块：<body> <ul class="nav">
复制链接

扫一扫