什么闭包？闭包的作用有哪些？闭包的注意事项

最新推荐文章于 2024-03-13 21:37:42 发布

boboj1

最新推荐文章于 2024-03-13 21:37:42 发布

阅读量178

点赞数 2

分类专栏： JavaScript 文章标签： js 内存泄漏

本文链接：https://blog.csdn.net/Wind_AN/article/details/117406645

版权

JavaScript 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

当内部函数被保存到外部时，将会生成闭包。闭包会导致原有作用域链不释放，造成内存泄漏。
直接看一个示例
我想让数组的每一项都是一个函数，并且调用该函数的时候输出的是数组该项的下标

        var arr = [];
        for(var i = 0;i < 5;i ++) {
            arr[i] = function() {
                console.log(i);
            };
        }
        arr[0]();//5

arr0;的结果是5
我们可以根据闭包的特性，将内部的变量保存到外部，这个变量在函数执行后不会被销毁

        for(var i = 0;i < 5;i ++) {
            (function(i){
                arr[i] = function() {
                    console.log(i);
                }
            })(i);
        }
        arr[0]();//0

在arr[i] = function(){}外面再套一个立即执行函数，并且把i当作实参传给立即执行函数的形参，每循环一次则立即执行一次，并且将这个i保存到了外部的数组arr中，从而让这个i变得私有化。

闭包的好处

1.希望一个变量常驻在内存当中
2.避免全局变量污染
3.可以声明私有成员

假设有两个人在定义变量的时候，变量的名字是一样的，则可用闭包使得每个人定义的变量私有化，以下示例

        var part1 = (function(){
            var count = 10;
            function aaa(){
                count +=2;
                alert(count);
            }
            return {
                funcA: aaa
            }
        })();

        var part2 = (function(){
            var count = 10;
            function aaa(){
                count +=10;
                alert(count);
            }
            return {
                funcA: aaa
            }
        })();
        part1.funcA();
        part2.funcA();

在这里插入图片描述

闭包的注意事项
私有化变量一直占用内存怎么办

<body>
    <button id="div">点击</button>
    <script>
        window.onload = function() {
            var div = document.getElementById("div");
            div.onclick = function() {
                alert(div.id);
            }
        }
    </script>
</body>

<body>
    <button id="div">点击</button>
    <script>
        window.onload = function() {
            var div = document.getElementById("div");
            var id = div.id;
            div.onclick = function() {
                alert(id);
            }
            div = null;
        }
    </script>
</body>