0

我有以下代码：

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

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

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

这样做的正确方法是什么？

编辑：添加了更多代码并更改了函数的名称，因为它太混乱了

4

2 回答 2

1

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

来自MDN：

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

JavaScript 没有块语句范围；

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

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

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

    someElement.appendChild(x.getDiv());

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

第二个问题是您的functionThatCreatesADivElement()构造函数没有被正确调用。使用new functionThatCreatesADivElement()，因为您正在调用构造函数。

于 2013-08-02T18:00:26.047 回答
0

解决了。我不得不使用

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

}

于 2013-08-02T18:12:14.213 回答