javascript - 在事件触发时将变量传递给闭包

Question

我有一个循环，我在其中为一个事件定义了一个闭包:

for (var i = 0; i < 3; i++) {
    obj.onload = function(e) {
        me.myFunction(e, i);
    };
}

我需要将该计数器变量传递给触发 load 事件时调用的函数。我总是传递相同的值。

如何将正确的计数器值传递给函数？

Answer 1

解决此问题的通常方法是使用构建器函数，以便处理程序关闭不会更改的内容:

function buildHandler(index) {
    return function(e) {
        me.myFunction(e, index);
    };
}
for (var i = 0; i < 3; i++) {
    obj.onload = buildHandler(i);
}

您可以使用立即调用的函数表达式 (IIFE) 来做到这一点，但在理论上它会在每个循环中创建和丢弃一个函数(我希望大多数 JavaScript现在的引擎对此进行了优化)，至少我认为它更难阅读:

for (var i = 0; i < 3; i++) {
    obj.onload = (function(index) {
        return function(e) {
            me.myFunction(e, index);
        };
    })(i);
}

有一个 ES5 特性，Function#bind，如果你想直接使用 me.myFunction，你可以使用它，但是你必须改变顺序您期待的参数(首先是 index，然后是 事件):

for (var i = 0; i < 3; i++) {
    obj.onload = me.myFunction.bind(me, i);
}

bind 创建一个函数，该函数在被调用时调用原始函数，并将 this 设置为第一个参数(因此，上面的 me) ，然后是您给它的任何其他参数，然后是调用该函数时使用的任何参数。 (这就是为什么 myFunction 期望它们必须更改为 index, e 而不是 e, i 的原因。)

在旧版浏览器上，您需要为 Function#bind 填充一个 shim。