javascript - 在循环中将函数添加到javascript的数组

Question

我尝试用循环中的函数创建数组。但我认为不要了解封装。

例如，此代码返回“y y”。 Live demo .

HTML

<div id="result"></div>

Javascript

var json = {
            '1':'x',
            '2':'y'
           };
var my_array = [];
var div = document.getElementById('result');

for (var key in json) {
    my_array.push(function() { 
        div.innerHTML = div.innerHTML + ' ' + json[key];
    });
};

var length = my_array.length;

for (var i = 0; i < length; i++) {
  my_function = my_array[i];
  my_function();
}

我应该怎么做才能得到“x y”？

非常感谢。

Answer 1

这是由于闭包在 JavaScript 中的工作方式。

你想要这样的东西:

for (var key in json) {
    (function(key) {
        my_array.push(function() { 
            div.innerHTML = div.innerHTML + ' ' + json[key];
        });
    })(key);
}

在 JavaScript 中，闭包或匿名函数在词法上绑定(bind)到它们定义的范围。这意味着它们可以访问在闭包也定义的范围内定义的所有变量。

因此在您的原始代码中，您有 key , 最初指向 1 .在你的函数中，你有 json[key] , 原来是 json[1] ，即 x .然后当循环进入下一次迭代时，你有 key设置为 2 .但问题是 key在第一个函数实例和第二个函数实例中都指向相同的位置。因此，当您最终评估该函数时，它们将使用任何值 key 在执行时。执行时，key设置为 2因为那是 key 的最后一个值在循环结束时。

要解决此问题，您必须使用匿名的自调用函数引入新范围。通过使用此模式，您有意引入了一个新 范围，这样 key在这个新范围内有自己的位置，不同于 key在外部范围内。

Check out the updated fiddle .