使用父類的方法中的子類的類變量，使變量可以動態更改（javascript）

我正在製作一個網頁，魚在後臺移動。我爲每種魚類都有一個稱爲魚類和兒童課程的父級課程。 Fish類有一個打印方法，我想引用每個物種類實例通常使用的變量。我需要動態調整圖像大小，所以我想簡單地修改物種的變量並調整物種的每個物體。我的問題是：如何爲父類方法中每個類的每個實例使用的每個類創建一個變量？使用父類的方法中的子類的類變量，使變量可以動態更改（javascript）

這是我嘗試過的簡化版本。當然這是行不通的。任何幫助將非常感激。

<!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>

來源

2013-04-27 laertiades

也許是這樣的：http://elegantcode.com/2011/01/19/basic-javascript-part-7-static-properties-and-methods/ – CBroe 2013-04-27 01:01:07

謝謝你，CBroe，鏈接。我實際上使用相同的帖子來創建我的程序如上所示。問題是每條魚都可能向前或向後移動，因此每個班級將會有2張圖片。每個單獨的對象都需要一個變量來確定哪個類圖像用於顯示。我需要像我想的指針。這樣每個對象都有一個指向兩個靜態類的變量之一的指針，當這些靜態變量改變了所有的對象時，它們就會相應地改變。這個指針需要在通用的Fish打印方法中使用。 – laertiades 2013-04-27 13:55:41

試試這個：

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爲原型（第一個參數）。

編輯：

如果你想魚具有不同的尺寸，你可以添加一個寬度和高度參數打印（）：

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

或者，你可以做X， y，每個魚的寬度和高度屬性並參考它們。：如果你希望所有的小丑魚到

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

：

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

關於你的上述評論，如果你希望能夠使用兩個圖像的每一條魚，讓他們可配置的，你可以這樣做改變方向一次，你可以在「前進」變量移動到clownF對象：

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

如果你希望所有的魚來一次，你可以把它添加到魚對象改變。

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

來源

2013-04-27 02:03:40 bwroga

謝謝bwroga的建議。出於某種原因，我仍然有同樣的問題。兩條魚的尺寸相同。在調用onload之前我必須分配src，否則什麼也沒有出現。 – laertiades 2013-04-27 13:36:06

@JesseGoodfellow請參閱我上面的編輯。 – bwroga 2013-04-27 16:13:18

謝謝你，bwroga，感謝你的幫助。我非常感謝。 – laertiades 2013-04-28 14:03:36

使用父類的方法中的子類的類變量，使變量可以動態更改（javascript）

回答

相關問題