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

最新推荐文章于 2024-05-03 11:08:18 发布

chnnds

最新推荐文章于 2024-05-03 11:08:18 发布

阅读量615

点赞数

文章标签： javascript 前端 jquery

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

版权

前言

又是开始学习的时候了，愉快的年假结束了！你们这个年过的快乐吗？现在又开始投入到愉快的学习当中，你们肯定是非常的“开心”，非常的“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>

闭包结束

今天的分享到这里就结束了哦！感觉这着知识点还有一点的模糊！可能还没有从过年的状态上调整过来。各位这些知识点学得好的大佬欢迎你们评论指点啊！小编感激不尽！

chnnds

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JavaScript高级应用-----闭包

目录前言1、开始闭包1.1、回忆变量的作用域1.2、那什么是闭包1.3、闭包的作用1.4、闭包的案例闭包结束前言又是开始学习的时候了，愉快的年假结束了！你们这个年过的快乐吗？现在又开始投入到愉快的学习当中，你们肯定是非常的“开心”，非常的“happy”。当然我和你们是一样的！但是该学习还是要学习啊！今天我们来讲讲JavaScript中的闭包！这个图像不像你们假装期待的样子？1、开始闭包1.1、回忆变量的作用域在开始...
复制链接

扫一扫