Question

我正在尝试运行以下代码，但在gameLoop函数中遇到错误：JavaScript运行时错误：对象不支持属性或方法'update'。

我是一名初学JavaScript程序员。你能发现这段代码有什么问题吗？

function Core(context) {
    this.context = context;
    this.fps = 500;
    this.sprite = new Sprite();
}

Core.prototype.run = function() {
    setInterval(this.gameLoop, this.fps); // <<<< PROBLEM
}

Core.prototype.gameLoop = function () {
    this.update();
    this.draw();
}

Core.prototype.update = function () {
    this.sprite.x += 50;
    this.sprite.y += 50;
}

Core.prototype.draw = function () {
    this.context.clearRect(0, 0, 300, 300);
    this.context.fillRect(this.sprite.x, this.sprite.y, 50, 50);
    this.context.fillText('x: ' + this.sprite.x + ' y: ' + this.sprite.y, 10, 250);
}

Answer 1

在JavaScript中，this完全由函数的调用方式定义，而不是定义在何处或如何定义。问题是setInterval不会使用正确的this值调用您的代码。修复：

function Core(context) {
    var self = this;

    this.context = context;
    this.fps = 500;
    this.sprite = new Sprite();
    this.boundGameLoop = function() {
        self.gameLoop();
    };
}

Core.prototype.run = function() {
    setInterval(this.boundGameLoop, this.fps);
}

在具有ES5功能的JavaScript引擎上（或者如果您使用的是ES5“垫片”），您可以将Core更改为：

function Core(context) {
    this.context = context;
    this.fps = 500;
    this.sprite = new Sprite();
    this.boundGameLoop = this.gameLoop.bind(this);
}

更多阅读：

旁注：您的代码依赖于Automatic Semicolon Insertion的恐怖。（所有功能分配 - Core.prototype.run = function() { ... }）在结束}后需要使用分号。）

Answer 2

您需要的是.bind。

 setInterval(this.gameLoop.bind(this), this.fps)

Answer 3

尝试重新调整代码，以便在调用之前声明更新，例如

Core.prototype.update = function () {
    this.sprite.x += 50;
    this.sprite.y += 50;
}

Core.prototype.gameLoop = function () {
    this.update();
    this.draw();
}

对象不支持方法

3 个答案: