在父方法中使用子类变量，以便可以动态更改变量（javascript）答案

【问题标题】：use class variable of child in method of parent such that variable can be changed dynamically (javascript)在父方法中使用子类变量，以便可以动态更改变量（javascript）
【发布时间】：2026-02-13 18:50:01
【问题描述】：

我正在制作一个网页，其中有鱼在后台移动。我有一个名为 Fish 的父类和每种鱼的子类。 Fish 类有一个 print 方法，我想引用该类的每个实例常用的变量。我需要动态调整图像的大小，所以我想简单地修改物种的变量并调整物种的每个对象。我的问题是：如何在父类方法中为每个类创建一个可供该类的每个实例使用的变量？

这是我尝试过的简化版本。当然是行不通的。任何帮助将不胜感激。

<!DOCTYPE html>
<html>
     <body>
          <canvas id="myCanvas"></canvas>
     </body>
     <script>

          function Fish(fi){
               this.myPic = fi;
          }
          Fish.prototype.print = function(cnv, x, y){
               cnv.drawImage(this.myPic,x,y);
          };

          function clownF(){Fish.call(this, clownF.pic);}
          clownF.prototype = Object.create(Fish.prototype);
          clownF.prototype.constructor = clownF;
          clownF.pic = new Image();
          clownF.pic.src = "clownF.png";

          clownF.pic.onload = function(){
               var c=document.getElementById("myCanvas");
               c.width = 500;
               c.height = 300;
               var ctx=c.getContext("2d");

               var f = new clownF();
               f.print(ctx,10,10);

               var temp = document.createElement('canvas');
               temp.width = clownF.pic.width / 2;
               temp.height = clownF.pic.height / 2;
               var tctx = temp.getContext('2d');
               tctx.drawImage(clownF.pic,0,0,temp.width,temp.height)
               clownF.pic = temp;

               f.print(ctx,100,100);
          }
     </script>
</html>

【问题讨论】：

可能是这样的：elegantcode.com/2011/01/19/…
感谢 CBroe 提供的链接。我实际上使用同一篇文章来创建上面显示的程序。问题是每条鱼可能会向前或向后移动，因此每个类将有 2 张图像。每个单独的对象都需要一个变量来确定哪个类图像用于其显示。我认为我需要一个指针之类的东西。这样，每个对象都有一个指针，该指针指向两个静态的类范围变量之一，当这些静态变量发生变化时，所有对象都会相应地发生变化。这个指针需要在通用的 Fish 打印方法中使用。

标签： javascript html oop html5-canvas

【解决方案1】：

试试这个：

var fish = {
    print: function (cnv, x, y) {
        cnv.drawImage(this.pic, x, y);
    }
}

var clownF = Object.create(fish, {
    pic: { value: new Image() }
});

// define onload here before you set src.

clownF.pic.src = "clownF.png";

如果你想创建更多的 clownFs（比如在 onload 方法期间），你可以使用 Object.create 和 clownF 作为原型（第一个参数）。

编辑：

如果你想让鱼有不同的大小，你可以在 print() 中添加一个宽度和高度参数：

var fish = {
    print: function (cnv, x, y, width, height) {
        cnv.drawImage(this.pic, x, y, width, height);
    }
};

或者，您可以为每条鱼创建 x、y、宽度和高度属性，并以此引用它们。：

var fish = {
    print: function (cnv) {
        cnv.drawImage(this.pic, this.x, this.y, this.width, this.height);
    }
};

var fish1 = Object.create(clownF, {
    pic: new Image(),
    x: 0,
    y: 0,
    width: 100,
    height: 50
});

关于您的上述评论，如果您希望能够为每条鱼使用两个图像并使其可配置，您可以这样做：

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.forwardPic, x, y);
        } else {
            cnv.drawImage(this.backwardPic, x, y);
        }
    }
}

var clownF = Object.create(fish, {
    forwardPic: { value: new Image() },
    backwardPic: { value: new Image() }
});

clownF.forwardPic.src = "forwardClownF.png";
clownF.backwardPic.src = "backwardClownF.png";

var fish1 = Object.create(clownF, {
    forward: true
});
var fish2 = Object.create(clownF, {
    forward: false
});

如果你想让所有小丑鱼同时改变方向，你可以将“前进”变量移动到 clownF 对象中：

var clownF = Object.create(fish, {
    forwardPic: { value: new Image() },
    backwardPic: { value: new Image() },
    forward: true
});

如果你想让所有的鱼同时改变，你可以将它添加到 Fish 对象中。

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.forwardPic, x, y);
        } else {
            cnv.drawImage(this.backwardPic, x, y);
        }
    },
    forward: true
}

如果前后图像相同，您可以只使用一张图像并将其翻转：

var fish = {
    print: function (cnv, x, y) {
        if(this.forward) {
            cnv.drawImage(this.pic, x, y);
        } else {
            cnv.save();
            cnv.scale(-1, 1);
            cnv.drawImage(this.pic, x, y);
            cnv.restore();
        }
    }
}

【讨论】：

感谢 bwroga 的建议。由于某种原因，我仍然有同样的问题。两条鱼看起来一样大。我必须在调用 onload 之前分配 src，否则什么都不会出现。
感谢 bwroga 的所有帮助。非常感谢。