在for循环Javascript中维护参考

Question

我有以下代码：

for(var i = 0; i < nodelist.length; i++) {
    var x = functionThatCreatesADivElement();

    someElement.appendChild(x.getDiv());  // this works fine

    nodelist[i].onclick = function() {
       x.someFunction();                  // this always refer to the last 'x' object
    }
}


function functionThatCreatesADivElement() {
   var div = document.createElement("div");

   this.someFunction = function() {}

   this.getDiv = function() {
      return div;
   }

   return this;
} 

问题是nodelist[0].onclick的执行与nodelist[4].onclick （假设i = 4是最后一个节点）。

我相信以前迭代的引用正在更改为指向当前迭代的元素。

正确的做法是什么？

编辑：添加了更多的代码，并更改了函数的名称，因为它太令人困惑

Answer 1

你有两个问题。 第一个问题是JavaScript变量没有块作用域。

从MDN ：

当您在任何函数之外声明变量时，该变量称为全局变量，因为它可用于当前文档中的任何其他代码。 在函数中声明变量时，该变量称为局部变量，因为它仅在该函数中可用。

JavaScript没有block语句范围；

您没有将x变量包含在函数中，因此所有onclick回调都使用相同的x变量，该变量指向循环中最后一个元素，因为该元素将是覆盖x的最后一个元素。

为循环执行此操作应该有效：

nodelist.forEach(function (nodeitem) {
    var x = functionThatCreatesADivElement();

    someElement.appendChild(x.getDiv());

    nodeitem.onclick = function() {
        x.someFunction();
    }
});

第二个问题是您的functionThatCreatesADivElement()构造函数未正确调用。 由于要调用构造函数，请使用new functionThatCreatesADivElement() 。

Answer 2

解决了。 我不得不用

var x = new functionThatCreatesADivElement();

function functionThatCreatesADivElement() {
   var div = document.createElement("div");

   this.someFunction = function() {}

   this.getDiv = function() {
      return div;
   }

   //return this;  //Using new instead of returning this

}