javascript原型继承 - 2个对象使用自己的原型方法,但只有1个被调用

时间:2012-11-11 20:17:16

标签: javascript inheritance prototype

修改 我仍然想知道为什么会发生这种情况但是在阅读原型上的一些内容后,我的解决方案是不要让2个对象覆盖基础原型,因为根据http://freshbrewedcode.com/derekgreer/2011/12/31/solid-javascript-the-liskov-substitution-principle/

我有3个对象

基础对象称为对象控件

对象moneyBag和object movementPad都继承了控件的原型。

money bag和movingPad都有2种不同的绘图功能,因此代码看起来像这样

Money.prototype.Draw = function (context) {
    console.log("foo2");
}

MovementPad.prototype.Draw = function (context) {
    console.log("foo1");
}

在我的HUD.js中,这两个对象都是初始化的,然后Hud将这两个对象称为这样的画面

var movementControl = new MovementPad(screenManager, 1,1,1,1);

var money = new Money(screenManager, 10, 10, 37, 36);

   // .... code skipped
this.Draw = function (context) {
    movementControl.Draw(context);
    money.Draw(context);
}

我的问题是这两个对象都没有调用它们的draw方法。如果我首先初始化movingPad,那么将调用draw方法,如果我首先初始化money只会调用draw方法。

我错过了对原型的理解/做错了,因为他们的两种绘制方法都没有被调用。

(以下更多代码)

function control(x, y, width, height) {
    "use strict"
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    var defaultImg = new Image();
    defaultImg.src = "blank.png";
}


    //.... code skipped

control.prototype.Draw = function (context) {
    context.drawImage(defaultImg, this.x, this.y, this.width, this.height);
}

movementPad.js

MovementPad.prototype = control.prototype;
MovementPad.prototype.constructor = MovementPad;

function MovementPad(screenManager, x, y, width, height) {
    "use strict"
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

    //.... code skipped

    MovementPad.prototype.Draw = function (context) {
        context.drawImage(movementPad, x, y , width ,height);

    }

}

Money.js

Money.prototype = control.prototype;
Money.prototype.constructor = Money;

function Money(screenManager, x, y, width, height) {
    "use strict"
    this.x = x;
    this.y = y;
    this.width = width;
    this.height = height;

  //.... code skipped

    Money.prototype.Draw = function (context) {
        context.drawImage(moneyBag, x, y, width, height);
    }
}

1 个答案:

答案 0 :(得分:0)

您已为control.prototypeMoney的原型分配了相同的MovementPad实例,因此您的Draw方法声明会互相破坏。

使原型分开实例:

Money.prototype = new control();
// ...
MovementPad.prototype = new control();

您的Draw作业应该有效。