闭包应用

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>

猜你喜欢

转载自www.cnblogs.com/forever-xuehf/p/8987505.html