调用方法时未定义Javascript中的对象

Question

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

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;
    }
}

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

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 方法或属性时都会弹出错误。

有什么想法吗？非常感谢你。

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

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 类上尝试此更改：

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();
    }
}

最好的问候！