javascript - 在 for 循环中创建闭包 - 我这样做对吗？

Question

我很可能。这里非常密集，但我无法弄清楚下面的代码到底发生了什么。

我想做的是将两个单独的处理程序附加到字段的更改事件。每个处理程序都是通过遍历数组并使用数组中的项在处理程序运行时影响处理程序的输出来设置的 - 希望您在查看示例代码时会变得清楚。

代码如下:

    $(document).ready( function () {
        //
        // Create some test input fields on the page...
        //
        $('<br />').insertAfter($('body > *:last'));
        $('<input type="text" name="t0" id="t0" value="" />').insertAfter($('body > *:last'));
        $('<input type="text" name="t1" id="t1" value="" />').insertAfter($('body > *:last'));

        //
        // The problematic part  - for me at least...
        //
        var arr = new Array(1, 2);
        for (var a in arr) {
            // Using Chrome console here for logging
            console.log("## " + a);
            $('#t0').change(function () {
                console.log(">> " + a)
            });
        }
    });

因此，当我向第一个字段添加一个值时，我期望发生的情况是，从控制台中(在 Chrome 中运行这些示例):

## 0
## 1
>> 1
>> 2

我得到的是:

## 0
## 1
>> 1
>> 1

我原以为传递给处理程序的函数会在 a 的值上形成一个闭包，我最终会得到两个绑定(bind)到处理程序的函数，其中一个 a 的值为 1，其中 a 的值为 2。

想法？

干杯 - 克里斯

Answer 1

这里有两个大错误:

首先，for (a in x) 并不像您期望的那样工作:它遍历对象属性，而不是数组元素。

另一个错误是 a 在函数被调用时改变了。实现所需功能的一个好方法是这样的:

for(var a=0; a<arr.length; a++) {
    (function(a) {
        // now you can use "a"
    })(arr[a]);
}

要查看如果不创建闭包，for 循环会发生什么情况，请参见:

var arr = [1,2,3];
var functions = [];

for(var a=0; a<arr.length; a++) {
    functions.push(function() {
        console.log(a);
    })
}

// now execute all the functions
for(var i=0; i<functions.length; i++) {
    functions[i]();
}

现在所有函数都将记录 3，这是数组中最后一个元素的索引 + 1 (arr[0] == 1, arr[1] == 2 , arr[2] == 3).发生的情况是 for 循环在每次迭代时创建这些函数，但是当 a == arr.length.