Dziedziczenie w Javascript. dlaczego nie mogę użyć dziedziczonej właściwości

Question

Pracuje nad grą w canvas Pomyślałem sobie, że stworzę klasę Entity z której wszystkie inne obiekty klasy będą dziedziczyły i umieszczę w niej ctx,  żebym mógł rysować inne obiekty.

class Entity {

    constructor(color = 'blue', positionX = 200, positionY = 200, width = 100, height = 50) {
        this.width = width;
        this.height = height;
        this.color = color;
        this.positionX = positionX;
        this.positionY = positionY;

        this.myCanvas = document.createElement('canvas');
        this.ctx = this.myCanvas.getContext('2d');
        document.body.appendChild(this.myCanvas);
    }

}

Z powyższej klasy dziedziczy wszystkie właściwości klasa Asteroids i faktycznie w konsoli występuje widzę właściwość ctx do rysowania na canvas 

class Asteroid extends Entity {
    constructor(color, positionX, positionY, width, height) {
        super(color, positionX, positionY, width, height)
    }

    asteroidDraw = () => {

        this.ctx.fillStyle = "red";
        this.ctx.fillRect(this.positionX - 2, this.positionY - 2, 4, 4);

    }

Poniżej zamieszczam konsole z chrma jako dowód że dana klasa odziedziczyła właściwość ctx

Asteroid {canvasDraw: ƒ, rand: ƒ, myCanvas: canvas, ctx: CanvasRenderingContext2D, myCanvasWidth: 1600, …}
asteroidDraw: () => {…}
canvasDraw: () => {…}
color: "blue"
ctx: CanvasRenderingContext2D {canvas: canvas, globalAlpha: 1, globalCompositeOperation: "source-over", filter: "none", imageSmoothingEnabled: true, …}
height: 50
myCanvas: canvas
myCanvasHeight: 420
myCanvasWidth: 1600
positionX: 200
positionY: 200
rand: (minS = 0, maxS = 240) => {…}
width: 100
__proto__: Entity

Pytanie brzmi dlaczego nie mogę jej użyć w metodzie asteroidDraw = () => { Nie mogę narysować tego kwadratu. Jeżeli jednak przekaże ctx w konstruktorze wszystko jest ok kwadrat się rysuję. Dziedziczenie ctx miało mi zapewnić że będę mógł narysować każdy obiekt i nie będę musiał pamiętać o przekazywaniu ctx za każdym razem w każdym obiekcie. Na marginesie chciałbym wiedzieć dlaczego skoro właściwość jest odziedziczona nie mogę jej użyć? Z góry dziękuje za wszystkie odpowiedzi (konstruktywne odpowiedzi).

Comments

Sprawdź, czym jest this wewnątrz metody asteroidDraw.

---

Jest asteroidą i ?

Answer 1

Ta zmienna nie jest dziedziczona. Żeby była dziedziczona, musiałaby być statycznym getterem w klasie Entity, zwracającym istniejący element canvas:

class Entity {
	static get ctx() {
		const canvas = document.querySelector( '#myCanvas' );

		return canvas.getContext( '2d' );
	}
}

Obecnie każda Twoja asteroida posiada swój własny canvas, który jest tworzony w chwili tworzenia samego obiektu (bo przy tworzeniu klasy potomnej jest wywoływany konstruktor klasy nadrzędnej; nie trzeba tego robić ręcznie, jak w Twoim kodzie) i nic nie jest dziedziczone.

Niemniej zamiast takiego rozwiązania proponowałbym zapoznać się z konceptem Dependency Injection i po prostu przekazać odpowiedni kontekst jako jeden z parametrów konstruktora. Będzie to wygodniejsze niż takie kombinowanie, a i będziesz miał większą pewność, że operujesz na prawidłowym płótnie.

Co do problemu z niewidocznością this.ctx w asteroidDraw: nie stworzyłeś tego jako metody klasy Asteroid, ale tak po prawdzie jako własność klasy, której przypisałeś funkcję strzałkową jako wartość. Twój kod jest praktycznie tożsamy z:

class Asteroid extends Entity {
	constructor(color, positionX, positionY, width, height) {
		super(color, positionX, positionY, width, height)

		this.asteroidDraw = () => {
 
			this.ctx.fillStyle = "red";
			this.ctx.fillRect(this.positionX - 2, this.positionY - 2, 4, 4);
	 
		};
	}
}

O wiele lepiej byłoby to stworzyć jako faktyczną metodę tej klasy. Wówczas wszystkie asteroidy korzystałyby z tej samej kopii tej funkcji (umieszczonej w prototypie), zamiast posiadać własną jej kopię. Niemniej oprócz tego działa to jak najbardziej poprawnie i funkcja odpala się na canvasie, jaki został stworzony w konstruktorze.

Answer 2

Dziedziczenie ctx miało mi zapewnić że będę mógł narysować każdy obiekt i nie będę musiał pamiętać o przekazywaniu ctx za każdym razem w każdym obiekcie

Chwila, moment.

        this.myCanvas = document.createElement('canvas');
        this.ctx = this.myCanvas.getContext('2d');
        document.body.appendChild(this.myCanvas);

Ale tutaj każdy element tworzy własny canvas.