javascript - 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 事件也附加在匿名函数中。

然后我调用“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 将无法被垃圾回收，因为你在解除绑定(bind)点击事件后再次运行它。 lc k 和 y() 现在在第一次调用 obj.test 时在一个单独的范围内再次定义，原来的仍然是免费 gc'd，但新的不是。如果点击事件随后解除绑定(bind)，lc、k、y() 和 obj 将不再被任何东西引用，因此对于 gc 来说是免费的。

上面的内容有点困惑，我会尽量让它更清楚。

只要 obj 中的某些内容引用的范围高于 obj.test() 创建的范围，obj不会被垃圾收集。由于调用 obj.test() 而绑定(bind)事件时，事件处理程序引用 obj.test() 范围内的变量，并且该元素是 dom 的一部分，所以 obj 不能被垃圾回收，直到事件不再绑定(bind)到元素。

这是一个例子:

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

只要 #myEl 上存在该点击事件，a 和 doA 就不能被垃圾回收。