调用方法时未定义 Javascript 中的 Object

Question

我正在构建一个类似于 Vanilla JS 中的 Chrome 恐龙的游戏。 为了使障碍物动画化，我创建了一个 class 障碍物，它存储了它们的 position 和大小，并定义了一个更改 position 的方法。

var Obstacle = function (type, w, h, sprite) {
    this.h = h;                    // Obstacle height
    this.w = w;                    // Obstacle width
    this.x = 600;                    // Starting horizontal position
    this.y = GROUND - this.h;           // Starting vertical position
    this.type = type;
    this.sprite = sprite;
    this.speed = -4;

    this.move = function () {
        this.x += this.speed;
    }
}

这些存储在一个数组中，定义为不同 class 的属性：

var ObstacleBuffer = function () {

    this.bufferFront = [];

    this.createObstacle = function () {
        this.bufferFront.push(this.createBox());
    }
    // Obstacle creators
    this.createBox = function () {
        if (Math.random() < 0.5) return new Obstacle ("box1", OBSTACLES.box1.w, OBSTACLES.box1.h, OBSTACLES.box1.sprite);
        return new Obstacle ("box2", OBSTACLES.box2.w, OBSTACLES.box2.h, OBSTACLES.box2.sprite);
    }

    //Obstacle animation
    this.animateObstacle = function () {
        this.bufferFront[0].move();
    }
}

运行时会弹出一个错误：

TypeError: Cannot read property 'move' of undefined.

我已经记录了this.bufferFront[0]的内容，它正确地显示了存储在其中的Obstacle 。

我也尝试将this.bufferFront[0]本地分配给一个变量，然后尝试从那里调用该方法。 存储的数据是正确的，但每当尝试访问Obstacles方法或属性时都会弹出错误。

有任何想法吗？ 非常感谢。

编辑 -我已根据您的建议查看了代码，问题似乎出在我调用 function 的地方。 在生成障碍物之前，我预加载了一系列图像，并且只有在这些图像加载后才生成障碍物：

this.loadWhenReady = function () {
        if (self.resources.isLoadComplete()) {
            self.sound.load(self.resources.list.sfx);
            drawGround();
            this.obstacles.createObstacle();  // <--
            self.startGame();
            return;
        } else {
            setTimeout(self.loadWhenReady, 300);
        }
    }

这被称为：

setTimeout(self.loadWhenReady, 300);

当然 const self = this之前已经定义过了。

当在SetTimeout之外调用该方法时，一切似乎都在向前发展。

为什么会发生这种情况？ 有没有办法在调用那里的方法时解决这个问题？

已解决 -正如@Bergi 和@Jaime-Blandon 所说，这是一个上下文问题。 从 setTimeout 循环外部调用该方法或使用self.obstacle.createObstacle()而不是this.obstacle.createObstacle()可以解决问题。

Answer 1

在 ObstacleBuffer Class 上尝试此更改：

var ObstacleBuffer = function () {

    this.bufferFront = [];

    this.createObstacle = function () {
        //this.bufferFront.push(this.createBox());
        this.createBox();
    }
    // Obstacle creators
    this.createBox = function () {
        if (Math.random() < 0.5) this.bufferFront.push(new Obstacle ("box1", OBSTACLES.box1.w, OBSTACLES.box1.h, OBSTACLES.box1.sprite));            
        this.bufferFront.push(new Obstacle ("box2", OBSTACLES.box2.w, OBSTACLES.box2.h, OBSTACLES.box2.sprite));
    }

    //Obstacle animation
    this.animateObstacle = function () {
        this.bufferFront[0].move();
    }
}

此致！