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);
}

Function#bind如果您想直接使用，可以使用ES5 功能，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.