js闭包

最新推荐文章于 2024-10-10 10:50:43 发布

Rock0807

最新推荐文章于 2024-10-10 10:50:43 发布

阅读量101

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/EvileOn/p/5515478.html

版权

借用一句话，在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>