在循环中向javascript的数组添加函数

Question

我尝试在循环中创建具有函数的数组.但我认为没有关于封装的东西.

例如,此代码返回"y y".现场演示.

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"？

Tnx很多.

Answer 1

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

你想要这样的东西:

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

在JavaScript中,闭包或匿名函数在词法上绑定到定义它们的作用域.这意味着,他们可以访问那些在该封闭的范围被定义的所有变量也定义.

所以在您的原始代码中,您有key,最初指向1.在你的功能中,你有json[key],原来是json[1],是x.然后,当循环进入下一次迭代时,您已key设置为2.但问题是key在第一个函数实例和第二个函数实例都指向同一个位置.所以,当你终于评价功能,他们会使用任何值key有在执行的时间.在执行时,key设置为2因为这是key循环结束时的最后一个值.

要解决此问题,您必须使用匿名的自调用函数来引入新范围.通过使用此模式,您有意引入一个新范围,以便key在此新范围内具有自己的位置,并且key与外部范围不同.

看看更新的小提琴.