Question

我有一个对象，该对象具有特定格式的JSON列表作为属性，因此我想从该列表中创建一组按钮，这些按钮应执行相同的功能，但参数由JSON给出。在下面，我将其写为一个简单示例，说明了我想如何执行此操作。每个按钮应记录其标记的编号。因此，“一个”打印1，“两个”打印2等等，但是每个按钮打印4。

现在，问题是（至少以我对javascript的理解）后期绑定。即，所有功能将尽可能晚地创建，这就是为什么所有按钮都将打印“值”的最后一个值的原因。如何避免这种情况？我对“ var self = this”的尝试也没有成功。

function My_object(div) {
  this.list = [{
    label: "one",
    value: 1
  }, {
    label: "two",
    value: 2
  }, {
    label: "three",
    value: 3
  }, {
    label: "four",
    value: 4
  }];
  this.div = div;
}

My_object.prototype.createButtonsInDiv = function() {
  var self = this,
    i = 0,
    label = '',
    value = 0;
  for (i = 0; i < this.list.length; i++) {
    label = this.list[i].label;
    value = this.list[i].value;
    this.div.appendChild(newButton(label, function() {
      console.log(value); // will always print '4'
      console.log(self.list[i].value); // will always get an error
    }));
  }
};

function newButton(label, func) {
  var button = document.createElement('button');
  var buttonText = document.createTextNode(label);
  button.appendChild(buttonText);
  button.addEventListener("click", func);
  return button;
}

var my_div = document.getElementById('my_div');
var o = new My_object(my_div);
o.createButtonsInDiv();

此示例中的html由一个id为“ my_div”的div组成。

Javascript：如何避免for循环中的后期绑定？

0 个答案: