创建一个 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>