闭包

最新推荐文章于 2025-04-24 23:33:53 发布

hui_style

最新推荐文章于 2025-04-24 23:33:53 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript 文章标签：闭包

本文链接：https://blog.youkuaiyun.com/hui_style/article/details/98111584

JavaScript 专栏收录该内容

8 篇文章

订阅专栏

闭包

1.闭包

闭包是指有权访问另一个函数作用域的变量的函数；
创建闭包的方式：在一个函数内部创建另一个函数；

2.闭包的内存问题

通常，函数的作用域及其所有变量都会在函数执行结束后被销毁。但是当函数返回到一个闭包时，这个函数的作用域将会一直在内存中存在到闭包不存在为止；

内部函数执行完成后，其活动对象不会被销毁，因为匿名函数的作用域链仍然在引用这个活动对象。即：当内部函数被返回后，其执行环境作用链会被销毁，但它的活动对象仍然会留在内存中，直到匿名函数被销毁后，内层函数的活动对象才会被销毁。

        //创建函数
        var comparNames = createComparisonFunction("name");
        //调用函数
        var result = comparNames((name: "mimi"), (name: "haha"));
        //解除对匿名函数的引用（以便释放内存）
        compareNames = null;

通过将compareNames设置为null解除该函数的引用，就等于通知垃圾回收例程将其清除。随着匿名函数的作用域被销毁，其他作用域（除了全局作用域）就可以安全的销毁。

3.闭包与变量

作用域的配置机制引出了一个副作用，即闭包只能包含函数中任何变量的最后一个值。
例如：

        for (var i = 1; i <= 5; i++) {

            setTimeout(function timer() {

                console.log(i);

            }, 1000);

        }
        
上面的代码会输出什么？怎么改动上述代码，使其依次输出1、2、3、4、5

答案是程序会先输出一个"5"，后面每隔1000毫秒输出一个6。

改动的代码：（通过创建另一个匿名函数强制让闭包的行为符合预期）

        for (var i = 1; i <= 5; i++) {

            (function(i){

                setTimeout(function timer(){

                    console.log(i);

                },1000);

            })(i);
            
        }

//扩展  使用let定义，声明一个仅对当前“{}”内部有作用的变量

        for (let i = 1; i <= 5; i++) {

            setTimeout(function timer() {

                console.log(i);

            }, 1000);

        }

因为setTimeout()函数要等执行完函数调用栈中的代码，然后才立即调用定时器。这是因为，我们的定时器都被放在了一个被称为队列的数据结构中，等待上下文的可执行代码运行完毕后，才开始运行定时器，也就是定时器才刚开始计时。所以在定时器的方法执行的时候，变量i已经变成了6，所以输出的全部是6。

再看一个例子：

        function createFunctions() {
            var result = new Array();

            for (var i = 0; i < 10; i++) {
                result[i] == function () {
                    return i;
                }
            }
            return result;
        }   //10


        //改进：通过创建另一个匿名函数强制让闭包的行为符合预期

        function createFunctions() {
            var result = new Array();
            for (i = 0; i < 10; i++) {
                result[i] = function (num) {
                    return function () {
                        return num;
                    };
                }(i);
            }
            return result;
        } //1~9

4.闭包的内存泄漏及解决

如果闭包的作用域链中保存着一个HTML元素，那么就意味着该元素将无法被销毁。
例：

        window.onload = function () {
            var el = document.getElementById("id");
            el.onclick = function () {
                alert(el.id);
            }
        }

上述，创建了一个el元素事件处理程序的闭包，而这个闭包有创建了一个循环引用的。由于匿名函数保存了一个对onload()的活动对象的引用，因此就会导致无法减少el的引用数。只要匿名函数存在，el的引用数至少是1，所占用的内存就永远不会被收回。

解决方法：
1.将el.id的一个副本保存在一个变量中，并且在闭包中引用该变量清楚循环引用；
2.有必要将el设置为null；

        window.onload = function () {
            var el = document.getElementById("id");
            var id = el.id; //解除循环引用
            el.onclick = function () {
                alert(id);
            }
            el = null; // 将闭包引用的外部函数中活动对象清除
        }