javascript - javascript setInterval 在数组对象上调用时出错

Question

我正在用 javascript 创建游戏。当用户单击向上箭头时，它会发射导弹。用户应该能够单击向上箭头，并且每次单击都应该发射一个新的导弹。我有一个“导弹”对象和一个“导弹”数组。导弹物体具有发射功能。

在 setInterval 中使用时，下面的行给了我一个错误。当我注释掉 setInterval 时，它可以正常工作。

错误信息：game.js:21

未捕获的类型错误：无法在 game.js:21 读取未定义的属性“样式”

有错误的行：this.image.style.left=this.leftPos+'px';

var missile = {
    leftPos: 0,
    bottomPos: 0,
    image: null,
    id: null,
    launch: function () {
        setInterval(function () {
            this.image.style.left = this.leftPos + 'px';
            this.image.style.bottom = this.bottomPos + 'px';
            this.leftPos += 0.5;
            this.bottomPos += 1;
        }, 10);
    }
}; 

在某个地方，我称之为：currMissile=missiles[missiles.length-1]; currMissile.launch();

标签： javascriptsetinterval

Answer 1

上下文 this 没有引用 object missile，此外，我可以看到您多次用相同的对象填充数组，这意味着数组中的所有索引都指向依赖于错误的同一个对象。

您应该在用户每次按下 UP 时实例化一个新对象。

例如

var Missile = function() {
  this.leftPos = 0;
  this.bottomPos = 0;
  this.image = { // Example
    style: {
      left: 4,
      bottom: 34
    }
  };
  this.id = null;
  this.launch = function() {
    setInterval(() => { // Use arrow function to get access to Missile lexical context.
      this.image.style.left = this.leftPos + 'px';
      this.image.style.bottom = this.bottomPos + 'px';
      this.leftPos += 0.5;
      this.bottomPos += 1;
      console.log(this.image.style.left);
    }, 500);
  };
};

new Missile().launch();

.as-console-wrapper { max-height: 100% !important; top: 0; }