在Javascript事件中引用的本地函数会发生什么？

Question

我想我错过了关于javascript非常重要的事情

var gl = 10
$(document).ready(function() {
    var obj = {}
    obj.test = function() {
        gl++

        var lc = gl
        function y() {
            alert('local = ' + lc)
        }

        (function() {
            var k = lc + 1
            $('#button').click(function() {
                alert('local anonymous = ' + k)
                y()
            })                  
        })();

    }

    obj.test()
    $('#button').off()
    obj.test()          
})

在上面的场景中,我定义了一个对象'obj',并为该对象创建了一个方法'test'.在方法内部,我有一个本地函数'y()',由附加到按钮的'click'事件使用.click事件也附加在匿名函数中.

然后我调用'test()',从按钮取消订阅'click'事件并再次调用'test()'.在结果中,我收到local = 12和local anonymous = 13.

但是我不明白javascript在内存中的作用,尤其是在每个步骤上运行'y()'和匿名函数.

我的具体问题如下,但如果您能解释整个流程,我将非常感激.

所以当我释放引用第一个'obj.test()'的所有事件时.在这种情况下,我猜这只是'点击'事件.javascript会破坏'obj.test()'范围和所有函数,包括匿名函数范围吗？我需要关心其他事情吗？

我的用例:我正在创建具有不同页面行为的动态页面加载,所以我想在全局对象方法中为每个页面分离javascript,并且一旦加载新页面,我想要分离上一页面的所有事件并调用行为功能.但是我突然意识到我并不真正理解javascript是如何工作的,并且这种方法可能存在巨大的内存泄漏.: - )

非常感谢!

Answer 1

当您使用.off解除绑定点击事件时，lc、k、 和y()会在 gc 运行时被浏览器进行垃圾收集 (gc)。在您调用的下一行中obj.test()，因此obj此时将无法进行垃圾收集，因为您在取消绑定单击事件后再次运行了它。lc k和y()现在在第一次调用 obj.test 时在单独的作用域中再次定义，原始的仍然可以自由地进行 gc'd，但新的则不能。如果稍后取消绑定单击事件，lc、k、 、y()和obj将不再被任何内容引用，因此对于 gc 来说将是免费的。

上面的内容有点令人困惑，我会尽力使其更清楚。

只要 内部的某些obj内容引用了高于由 所创建的范围的范围内的某些内容obj.test()，obj就不会被垃圾收集。虽然事件因调用而绑定obj.test()，但事件处理程序引用obj.test()作用域内的变量，并且该元素是 dom 的一部分，因此obj在事件不再绑定到元素之前无法进行垃圾收集。

这是一个例子：

(function(){
    var a = 1;
    function doA() {
        a++;
    }
    $("#myEl").click(doA);
})();

只要该点击事件存在于#myEl，a并且doA不能被垃圾收集。