我需要在 DOM 事件回调中使用闭包吗？

Question

我正在尝试构建一个类似 jQuery.live 的函数。 Helper 是一个具有 _liveEvent 和 _addEventListener 方法的类。 Helper._addEventListener 只是 W3C addEventListener 的跨浏览器版本。

Helper.prototype._liveEvent = function(type, evt, ofunc) {
    var elHand = document;
    type = type.toUpperCase();

    this._addEventListener(elHand, evt, function(me) {
        // Inside here I use the `type` variable.
        // I don't know why but it works.

        for (var el = me.srcElement; el.nodeName !== 'HTML';
            el = el.parentNode)
        {
            if (el.nodeName === type || el.parentNode === null) {
                break;
            }
        }
        if (el && el.nodeName === type) {
            ofunc.call(el, me);
        }

    });
};

我使用不同的类型运行 Helper._liveEvent 函数两次，它工作得很好。我认为由于 type 变量是在 _liveEvent 上下文中设置的，因此 _addEventListener 回调只能看到该变量的最后一个版本。但事实并非如此，它似乎工作得很好。

我的问题是：

• 为什么 _addEventListener 回调可以看到该类型的两个版本？
• 这是否意味着我的代码正在泄漏内存？

更新

另一个例子让我更好地理解了这一点，但我不确定我是否完全理解它。

function foo(i) {
    setTimeout(function() {
        console.log(i);
    }, 400);

}

// Prints 1, 2, 3
for (var i = 1; i < 4; i++) {
    foo(i);
}

function bar() {
    for (var i = 1; i < 4; i++) {
        setTimeout(function() {
            console.log(i);
        }, 400);
    }
}

// Prints 4, 4, 4
bar();
​

Answer 1

• 这是因为为传递给 _addEventListener() 的匿名函数的每个实例创建了一个单独的闭包作用域，每个实例都有自己的 elHand 和 type 值>。
• 这取决于你所说的“泄漏”是什么意思。每个闭包都会阻止它包含的对象被 GC 处理。当没有更多对象（例如，像您这样的匿名函数）引用闭包时，它就会被 GC 回收。从这个意义上说，是的，您存在内存泄漏，因为您无法删除添加的侦听器（匿名函数），从而使关联的作用域对象符合 GC 的条件。

Answer 2

实际上，您已经在创建一个闭包。这就是为什么：

for( var i=0; i<10; i++) {
    elem.onclick = (function(id) {alert(id);})(i);
}

有效 - 调用匿名函数创建一个新的闭包，并将 id 设置为 i 的当前值。 （我个人喜欢将参数称为与我要使用的变量相同的东西，因此我可以将其视为“锁定”该函数的变量值）。

就内存泄漏而言，两次调用不会导致泄漏。如果 GC 按我认为的方式工作，它会删除任何没有指向它们的闭包。特别是，当您离开某个页面时，与该页面关联的所有内存都会被释放。