javascript - 创建一个 10x10 字段的字段

Question

我有这段代码并且看起来是正确的，但是为什么新的 div 没有出现在父 div 中。有人可以向我解释为什么吗？

var myGame = {
  fieldSize: 10,
  drawField: function() {
    setInterval(function () { 

      var parent = document.getElementById('parent')
      parent.innerHTML = '';
      for (var i=0; i<this.fieldSize; i++) {
        var row = document.createElement('div');
        for (var j=0; j<this.fieldSize; j++) {
          var field = document.createElement('div');
          field.className = 'field';      
          row.appendChild(field);
        }
        parent.appendChild(row);      
      }
    }, 3000)
  }
}
myGame.drawField()

<div id="parent"></div>

Answer 1

您的 setInterval 创建了另一个上下文，因此 this.fieldSize 是 undefined

var myGame = {
  fieldSize: 10,
  drawField: function() {
    setInterval(() => { 

      var parent = document.getElementById('parent')
      parent.innerHTML = '';
      for (var i=0; i<this.fieldSize; i++) {
        var row = document.createElement('div');
        for (var j=0; j<this.fieldSize; j++) {
          var field = document.createElement('div');
          field.className = 'field';			
          row.appendChild(field);
        }
        parent.appendChild(row);			
      }
    }, 3000)
  }
}
myGame.drawField()

<div id="parent"></div>