javascript - 在这种情况下如何继承一个对象呢？

Question

这可能以某种形式被问到，我尝试检查此资源:https://developer.mozilla.org/en/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

我的 gameobject.js 看起来像这样:

function GameObject(program)
{
    this.program = program;
    this.graphics = null;
}

GameObject.prototype.update = function(dt)
{

}

GameObject.prototype.draw = function()
{
    // Here graphics would be the graphics of the child class, 
    // because the graphics would be replaced with the child class' graphics
    if(this.graphics !== null)
        this.program.renderer.render(this.graphics);
}

我想要另一个类，例如，box.js:

function Box(program, width, height, x, y)
{
    // Call base constructor here?

    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
}

现在我想基本上从 GameObject 继承更新和绘制方法，并使用程序参数调用 GameObject 构造函数，因此最终应该像这样工作:

var box = new Box(program, 10, 10, 100, 100);

// In game class update method
box.update(this.td);

// In game class draw method
box.draw();

基本上就像 C# 中的实现方式一样。如果我能让 Box 从 GameObject 继承更新和绘制方法，那已经很有帮助了。

编辑1:Jsfiddle在这里:https://jsfiddle.net/0df9rfu5/1/

编辑2:我尝试了这样的解决方法:

function Box(program, width, height, x, y)
{
    var self = this;

    this.base = new GameObject(program);

    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;

    this.update = function(dt) { self.base.update(dt); };
    this.draw = this.base.draw();
}

因此，每次创建 Box 时，我都会创建基类 GameObject 的新实例，然后将盒子的更新和绘制方法设置为 GameObject 的更新和绘制方法。

但这并不能解决问题，而且我认为这种方法无论如何都存在严重错误。

编辑 3:也许我应该像以前一样这样做...从 GameObject 继承的所有内容仍然必须重写 update 和 draw 方法。只是我想我不能确定游戏对象列表中的每个对象都有绘制和更新方法，我只能假设它们有。

Answer 1

JavaScript 中的构造函数只是简单的函数。要从 Box 构造函数内部调用 GameObject，您可以使用:

GameObject.call(this, program);

要让 Box 对象继承 GameObject 使用

Object.setPrototypeOf(Box.prototype, GameObject.prototype);

请务必将上面的行放在第一次调用 new Box 之前。

为了与旧版浏览器(tanks @Bergi)实现最佳兼容性，您可以使用新对象覆盖 Box.prototype，而不是使用 Object.setPrototypeOf。

Box.prototype = Object.create(GameObject.prototype, { configurable: true, writable: true, value: Box });

然后您应该能够在 Box 对象上使用 draw 和 update 方法。

下面的示例应该会让您走上正轨

function GameObject(program)
{
    this.program = program;
    this.graphics = null;
}

GameObject.prototype.update = function(dt)
{
    alert('updating');
}

GameObject.prototype.draw = function()
{
    // Here graphics would be the graphics of the child class, 
    // because the graphics would be replaced with the child class' graphics
    if(this.graphics !== null)
        this.program.renderer.render(this.graphics);
}

function Box(program, width, height, x, y)
{
    GameObject.call(this, program);

    this.width = width;
    this.height = height;
    this.x = x;
    this.y = y;
}

Object.setPrototypeOf(Box.prototype, GameObject.prototype);

let b = new Box();

b.update();