zoukankan      html  css  js  c++  java
  • 闭包应用

    1.闭包含义

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>闭包就是一个对象,里面包含着一个函数,以及包含着一个被它捕获的变量</p>
        <script>
            function f1(){
                var a=1;
                var b=2;
                function f2(){//此时已经产生闭包了。f2的【scope】-->f1的词法环境(Lx)
                    console.log(a);
                }
                f2();
            }
            f1();
        </script>
    </body>
    </html>

    2.闭包应用之减少全局变量

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>闭包好处一:减少全局变量</p>
        <script>
            //1.有时当我们需要实现一个函数每调用一次都自增的效果,但是根据局部变量的垃圾回收机制,这个例子显然不能实现
    //        function f(){
    //            var a=1;
    //            a++;
    //            alert(a);
    //        }
    //        f();
    //        f();
    //        f();
            //2.于是我们把a设为全局变量,虽然效果实现了但是会导致全局变量过多,在大型项目中会产生命名冲突等一系列问题
    //        var a=1;
    //        function f(){
    //            a++;
    //            alert(a);
    //        }
    //        f();
    //        f();
    //        f();
            //3.而闭包却能解决这个问题,
            function f(){
                var a=1;
                return function(){
                    a++;
                    alert(a);
                }
            }
            var g=f();
            g();
            g();
            g();
            //至此,我们使用闭包解决了这个问题,由于局部变量在子函数中被引用,而使其不能被垃圾回收机制回收,并且由于子函数可以引用该变量,所以return子函数,就能在函数外部引用该变量了。只要不关闭浏览器不关闭该页面,函数外部就可以引用,这样的话a就不会被回收,值也就可以保存,也就可以递增
        //但是需要注意一个问题,闭包的存在会使得它不会被垃圾回收机制回收,它就会比其他函数占更多的内存,如果过渡使用闭包可能会导致内存占用过多。可能会导致浏览器崩溃的问题。那么解决的方法就是当已经达到我们需要达到的效果时,应该解除对匿名函数的引用,没有了引用,就变成了普通函数,就会被垃圾回收机制回收。
        </script>
    </body>
    </html>

    3.闭包应用之减少减少传递给函数的参数的数量

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>好处二:减少传递给函数的参数的数量</p>
        <script>
            //实现下面这个例子需要两个参数,a为基数,b为在i自增后的和
    //        function f(a,b){
    //            var c;
    //            var d=0;
    //            for (var i=1;i<=b;i++){
    //                d+=i;
    //            }
    //            c=a+d;
    //            alert(c);
    //        }
    //        f(3,4);//弹出结果为3+(1+2+3+4)=13
            //下面这个例子采用闭包可以用一个参数实现同样的效果
            function f(a){//创建基础值函数,参数为a。(f函数其实相当于一个创建函数的工厂一样,它返回另外一个即其内部的函数)
                return function(b){//创建自增加函数并返回(这个函数作为其内部函数会引用其参数形成闭包)
                    var c=0;
                    for(var i=0;i<=b;i++){
                       c+=i;//for循环实现自增到参数b,并赋值给c
                    }
                    return c+a;//返回c与基础值的和
                }
            }
            var g=f(2);//将f()函数赋值给g,给f函数传入参数2,即基础值2.(其实就是把f函数的返回值即自增加函数赋值给g,说白了,单看f()函数时,就是f()函数,当把f()函数当作值赋值时,f()函数的值其实就是其内部return的函数)
            alert(g(3));
            alert(g(4));//此时弹出g函数,给g函数传入参数3,也就是给f函数的返回值即自增加函数传入参数3.
            //最终弹出结果为2+(1+2+3)=8. 2+(1+2+3+4)=12.
            var g1=f(3);//当然也调用多次f()函数赋值,每调用一次,改变一次基础值函数的参数值,产生一个新的闭包
            alert(g1(4));
            alert(g1(5));//结果为3+(1+2+3+4)=13. 3+(1+2+3+4+5)=18.
        </script>
    </body>
    </html>

    4.闭包应用之封装

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <p>好处三:封装</p>
        <script>
            (function(){
                 var m=0;
                 function getM(){//得到m值
                     return m;
                 }
                 function setM(val){//设置m值
                     m=val;
                 }
                 window.g=getM;//为了在外部访问到,将其公布出函数外。
                 window.s=setM;
             })();//自调用函数,将其封装
            s(10);//设置值为10
            alert(g());//得到弹出值为10
        </script>
    </body>
    </html>
  • 相关阅读:
    Java接口的真正意义
    从机械自动化专业转行到Java工程师的学习之路
    程序员必备的17个软件开发工具
    【Java练手项目】Java外卖点餐系统
    Java接口的其他使用语法
    【Java练手项目】Java在线考试系统
    IDEA最新版本中maven配置默认选项
    Java 企业级项目需求文档
    Elasticsearch 搜索数量不能超过10000的解决方案
    Java中TreeSet怎么实现?(详解)
  • 原文地址:https://www.cnblogs.com/forever-xuehf/p/8987505.html
Copyright © 2011-2022 走看看