什么是javascript的闭包和闭包的规则特点

最新推荐文章于 2023-01-11 14:53:45 发布

_阿锋丶

最新推荐文章于 2023-01-11 14:53:45 发布

阅读量209

点赞数

分类专栏： javascript 前端

本文链接：https://blog.csdn.net/weixin_43342105/article/details/104167299

版权

javascript 同时被 2 个专栏收录

50 篇文章 2 订阅

订阅专栏

前端

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!-- 
    什么是闭包 

    闭包就是一个函数  两个函数彼此嵌套 内部函数就是闭包 
    形成闭包条件是内部函数需要通过 return 给返回来

    闭包的特点：

    闭包有权利调用其父级环境的变量信息，父级环境的信息已经固化为本省的AO成员了

    闭包使用规则：

    同一个闭包机制可以创建多个闭包函数出来，他们彼此没有联系，都是独立的，
    并且每个闭包可以保存自己个性化的


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

    <script>

        function f1() {
            var week = "sunday";
            function f2() {
                console.log('星期：' + week);
            }
            return f2;
        }

        var ff = f1(); //f1执行后会返回f2函数，函数（对象）对ff进行赋值（应用赋值）
        // 经过这个代码后 f2 和 ff 都会指向这个function 
        // 引用赋值 ：同一个function函数先后有两个名字进行指引

        // 以上代码形成了一个闭包 其是一个闭包 ff（）就是一个闭包

        // 调用闭包函数ff 使其发生执行
        ff();   //星期 ：  sunday
        // 以上通过ff（） 输出Sunday 不好理解（sunday本身是week的局部变量信息，原则上不能在
        // 外部环境访问 原因是f2和 ff是同一个function的两个不同名字  f2
        // 是局部  而ff是全局变量 
        // 内部的week永远都是我们自己AO活动对象 属性  因此只要该 function 能访问到  就无视内部变量的来源
        // 其就是函数AO活动对象的属性


        // ------------------------------------------------

        // 同一个闭包机制可以创建多个闭包函数出来，他们彼此没有联系，都是独立的，
        //     并且每个闭包可以保存自己个性化的



        function t1(num) {
            // 外部变量：变量 参数 函数
            // var num=100;
            function t2() {
                console.log("数字" + num);
            }
            return t2;
        }

        //  闭包机制每调用一次 就生成一个闭包函数
        var fa = t1(100);
        var fb = t1(200);

        fa();//100
        fb();//200
        // ------------------------------------------------

        function h1() {
          
            var num=200;
            function h2() {
                console.log("数字" + num++);
            }
            return h2;
        }

        var a=h1();
        a();  //200;
        a();  //201

        var b=h1();
        b();//200;
        b();//201
        

    </script>
</head>

<body>

</body>

</html>