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

    借用一句话,在js中我理解的闭包就是函数嵌套函数(反正我也是这么理解的),听那些大神的吧。

    像这样:

        function func1(){
            function func2(){
                
            }

        } 

     那么问题来了,闭包到底有什么用呢?

    内部函数可以调用外部函数的参数和变量,参数和变量是不会被垃圾回收机制回收的,也就是说变量一直都在内存中

        function func1(){
            var b = 1;
            function func2(){
                console.log(b);
            }
            return func2;
        }

        var fun = func1();

        fun();

    看山的那边,海的那边就是结果

     

     不明白?预知后事如何,请接着往下看吧

        var b = 1;
        function func1(){
            b++;
            console.log(b);
        }
        func1();

        func1(); 

     

         function func1(){

            var b = 1;
            b++;
            console.log(b);
        }
        func1();
        func1();

     

     这个我知道,应该一个是全局变量,一个是局部变量嘛,是答对了,不过没加分。

    我们都知道全局变量是会影响到程序性能的,所心好多语言都不推荐这样使用,只有在必要的时候才这样用。那要是我就不想2,就想3怎么办呢,这时候你也就用到闭包了。

    满足你:

        function func1(){
            var b = 1;
            return function func2(){
                b++;
                console.log(b);
            }
        }
        var fun = func1();
        fun();

        fun(); 

     

     就样就得到3了,不过这样fun = func1();是要怎样啊?不喜欢,没关系还有这个

        var fun = (function(){
            var b = 1;
            return function(){
                b++;
                console.log(b);
            }
        })(); 

        fun();
        fun(); 

     

    偷偷告诉你,上面那个叫匿名函数。

    我们来看看这段代码:

    <body>
        <ul>
            <li>111111111111</li>
            <li>222222222222</li>
            <li>333333333333</li>
            <li>444444444444</li>
        </ul>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var oLis = document.getElementsByTagName("li");
            for(var i=0;i<oLis.length;i++){
                oLis[i].onclick = function(){
                    console.log(i);
                };
            }
        };

    </script> 

     再看看这个结果:

     

     注意了,是4个4,为什么呢,好像和我们想的有一点不一样,为什么都是4?

    因为onclick函数是当你点击的时候才触发的,但是当你点击的时候for循环早就执行完了,所以你每次点击的时候,都是最后一个值。

    那怎么才能依次是0,1,2,3呢,bingo就是闭包

    <body>
        <ul>
            <li>111111111111</li>
            <li>222222222222</li>
            <li>333333333333</li>
            <li>444444444444</li>
        </ul>
    </body>
    <script type="text/javascript">
        window.onload = function(){
            var oLis = document.getElementsByTagName("li");
            for(var i=0;i<oLis.length;i++){
                (function(i){
                    oLis[i].onclick = function(){
                        console.log(i);
                    };
                })(i);
            }
        };

    </script> 

     

  • 相关阅读:
    atitit.颜色查找 根据范围 图像处理 inRange
    Atitit 跨平台的系统截图解决方案
    Atitit java opencv 捕获视频
    路法Atiti
    Atitit 获取本机图像设备视频设备列表 设备检索列表解决方案
    Atitit 团队工具链体系打造提升团队效率的一些通用软件 attilax总结
    Atitit gui控件定位解决方案
    Atitit html5.1 新特性attilax总结
    Atitti 模板匹配 List matchTemplate(
    利用CRebar和CDialogBar编写可浮动的dialog类型的工具栏
  • 原文地址:https://www.cnblogs.com/EvileOn/p/5515478.html
Copyright © 2011-2022 走看看