重点：闭包(js高级的重点和难点)

闭包（js高级中的难点与重点）

1.1-闭包介绍

闭包简介

• 1.闭包(closurc)作用：在函数外部访问函数内部变量

  • 闭包是一个可以获取其他函数内部变量的函数

• 2.语法

  • a.外部函数内部声明一个闭包函数
  • b.在闭包函数中返回想要访问的局部变量
  • c.外部函数中返回这个闭包函数

• 3.本质

  • 函数内部与函数外部连接起来的一座桥梁

• 闭包的重要性

• 1.需求引入：想要在函数外部访问函数内部的变量

• 2.思考能不能直接获取：不能

  • 原因：函数执行完毕之后局部变量会被系统回收
  • 复习js作用域
    • 全局作用域（全局变量）：函数外面声明的变量，可以在任何地方访问
    • 局部作用域（局部变量）：函数里面声明的变量，只能在函数里面访问

• 3.继续思考，使用return返回这个变量

  • 无法实现需求
  • 因为每一次调用函数都会重新声明一个新的变量，并不是同一个

• 4.闭包：可以保证函数内部变量只会声明一次，多次访问都是同一个变量

    <script>
        /* 
            1.闭包函数：闭包是一个函数
            2.闭包作用：函数外面访问函数内部的局部变量
            3.闭包语法：闭包语法有很多种写法，但是一般分为三个环节
                a. 在外部函数中 声明一个闭包函数(闭包函数可以访问1级链中的局部变量)
                b. 在闭包函数中返回你想要访问的局部变量
                c. 在外部函数中，返回这个闭包函数
                *闭包的本质：沟通全局作用域和局部作用域的一座桥梁

            1.抛出需求 ： 在函数外面访问函数内部变量
            2.思考问题 ：(1)复习js作用域  (2)返回值弊端
            3.引出 闭包解决问题

         */

        //1. 需求 ： 在函数外面访问函数内部变量

        /*js作用域 
            全局作用域（全局变量） 生命周期 ： 从页面加载开启， 到页面关闭结束
            局部作用域（局部变量） 生命周期 ： 从执行函数开始，  到函数执行完毕结束
        */
        // function outer(){
        //     var person = {
        //         name:'ikun'
        //     };
        // };

        // outer();//调用函数：执行函数体
        //报错原因 ： 局部变量生命周期 是从执行函数开始  到执行函数结束
        // 生命周期 ： 一个变量从开辟内存， 到被系统回收的过程
        // console.log(person);//报错 person is not defined

        //2. 返回值 ： return 值
        //弊端 ： 每一次返回的数据，不是同一个 （有一定的内存资源浪费）

        // function outer(){
        //     var person = {
        //         name:'ikun'
        //     };
        //     return person;
        // };

        // var p1 =  outer();
        // console.log(p1);

        // var p2 = outer();
        // console.log(p2);

        // //思考 ： p1 和 p2 虽然存储数据一样，但是是同一个对象吗？
        // //不是同一个 ： outer函数每调用一次，就会在堆中开辟空间， 虽然数据一样但是两个地址不同
        // console.log(p1 == p2);//false

        /* 3.使用闭包
        (1)闭包是什么 ： 闭包是一个函数
        (2)闭包作用 ： 函数外面 访问 函数内部变量(局部变量)
        (3)闭包语法 ： 闭包语法有很多种写法，但是一般分为三个环节
            a. 在外部函数中 声明一个闭包函数    （闭包函数可以访问1级链中的局部变量）
            b. 在闭包函数中 返回你想要访问的局部变量
            c. 在外部函数中 返回这个闭包函数

        闭包本质 ： 沟通 全局作用域 与 局部作用域的一座桥梁
        */

        function outer(){
            //1级链
            var person = {
                name:'ikun'
            };
            //1.在外部函数中声明一个内部函数(闭包函数)
            function closure(){
                //2.在闭包函数中 返回你想要访问的局部变量
                return person;
            };
            //3.在外部函数中 返回这个闭包函数
            return closure;
        };    
        //调用外部函数：返回闭包函数
        var bibao = outer();

        //调用闭包函数 ： 得到person
        var p1 = bibao();
        console.log(p1);
        var p2 = bibao();
        console.log(p2);

        //p1和p2是同一个对象吗？  : 是
        console.log(p1 == p2);// true

    </script>

1.2-闭包语法注意点

• 1.复习闭包标准语法
• 2.如果希望访问函数内部变量是同一个，外部函数只能调用一次
• 3.如果外部函数调用多次，则每一次都会重新声明内部变量

    <script>
        /* 
            闭包语法注意点：
                a. 得到相同的值 ：外部函数调用一次，闭包函数调用多次
                b. 得到不同的值 ：外部函数调用多次，闭包函数调用一次    
         */

         function outer(){
            var num = Math.ceil(Math.random() * 100);
            //1.声明一个闭包函数
            function closure(){
                //2.返回你想要访问的局部变量
                return num;
            };
            //3.返回这个闭包函数
            return closure;
         };

        //1. 得到的是 同一个变量 ： 外部函数调用一次，闭包函数调用多次
        /* 外部函数调用一次 */
        var bibao = outer();
        /* 闭包函数调用多次 */
        var num1 = bibao();
        var num2 = bibao();
        var num3 = bibao();

        console.log(num1,num2,num3);// 同一个num

        //2. 得到的是 不同的变量 ：  外部函数调用多次，闭包函数调用一次

        /* 外部函数调用多次 */
        // var bibao1 = outer();
        // var n1 =  bibao1();
        //函数连续调用
        var n1 =  outer()();

        // var bibao2 = outer();
        // var n2 = bibao2();
        var n2 = outer()();

        // var bibao3 = outer();
        // var n3 = bibao3();
        var n3 = outer()();

        console.log(n1,n2,n3);

        //3.测试题

        //有一个投票机，作用投票
        function toupiao(){
            var num = 10;
            //(1)声明一个闭包函数
            function closure(){
                //(2)返回局部变量
                num++;
                return num;
            };
            //(3)返回闭包函数
            return closure;
        };

        // 同一个投机， 连续投三票

        //相同的值 ： 外部函数调用一次， 闭包函数调用多次
        var bibao = toupiao();
        var p1 = bibao();
        var p2 = bibao();
        var p3 = bibao();
        console.log(p1,p2,p3);//11,12,13

        // 三个投票机，各投一票

        //不同的值 ： 外部函数调用多次， 闭包函数调用一次
        var piao1 = toupiao()();
        var piao2 = toupiao()();
        var piao3 = toupiao()();
        console.log(piao1,piao2,piao3);//11,11,11
    </script>

1.3-闭包语法练习

<body>
    <button>按钮1</button>
    <button>按钮2</button>
    <button>按钮3</button>
    <button>按钮4</button>
    <script>
        //需求：点击显示按钮索引(以前的做法：给每个按钮添加一个自定义索引)

        //获取按钮
        var btnList = document.querySelectorAll('button');
        //遍历按钮数组，注册点击事件
        for(var i = 0; i < btnList.length; i++){
            //使用闭包
            function outer(){
                var num = i;
                return function(){
                    console.log(num);
                };
            };
            btnList[i].onclick = outer();
        };
    </script>
</body>