js闭包

Posted 2020-07-09 EvileOn

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

以上是关于js闭包的主要内容，如果未能解决你的问题，请参考以下文章