JavaScript高级应用-----闭包

最新推荐文章于 2024-11-01 13:37:40 发布

chnnds

最新推荐文章于 2024-11-01 13:37:40 发布

阅读量656

点赞数

文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/chnnds/article/details/122860901

版权

本文介绍了JavaScript中的闭包概念，包括变量作用域、闭包的定义及其作用。通过实例展示了闭包如何扩大变量的作用范围，并提供了三个具体的闭包应用场景：获取点击li的索引、延迟打印li内容及计算打车费用。通过学习，读者将能更好地理解和运用闭包这一重要特性。

摘要由CSDN通过智能技术生成

前言

又是开始学习的时候了，愉快的年假结束了！你们这个年过的快乐吗？现在又开始投入到愉快的学习当中，你们肯定是非常的“开心”，非常的“happy”。当然我和你们是一样的！但是该学习还是要学习啊！今天我们来讲讲JavaScript中的闭包！这个图像不像你们假装期待的样子？

1、开始闭包

1.1、回忆变量的作用域

在开始分享闭包之前我们先来回忆一下以前我们所学习的作用域。

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

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

1.2、那什么是闭包

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

1.3、闭包的作用

闭包的作用就是：扩大变量的作用范围。就只有这么简单的一个作用，但是不可小瞧。

 function fn() {
   var num = 10;
   function fun() {
       console.log(num);
 	}
    return fun;
 }
var f = fn();
f();

1.4、闭包的案例

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <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(this.index);
            }
        }
        //利用闭包的方式得到当前小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>

</html>

(2)、闭包应用-3秒钟之后,打印所有li元素的内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<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>

</html>

(3)、闭包应用-计算打车价格

<script>
        //闭包应用-计算打车价格
        //打车起步价13（3公里内），之后每多一公里增加5块钱 用户输入公里数就可以计算打车价格
        //如果有拥堵的情况，总价格多收取10块钱拥堵费
        //  function fn(){};
        //  fn();
        var car = (function() {
            var steart = 13; //起步价 局部变量
            var total = 0; //总价   局部变量
            return {
                //正常的总价
                price: function(n) {
                    if (n <= 3) {
                        total = steart;
                    } else {
                        total = steart + (n - 3) * 5
                    }
                    return total;
                },
                //拥堵之后的费用
                yd: function(flag) {
                    return flag ? total + 10 : total;
                }
            }
        })();
        car.price();
        console.log(car.price(5));
        console.log(car.yd(true));
        console.log(car.price(1));
        console.log(car.yd(false));
    </script>