class / extends Vererbung
Ein Objekt, dass von einem DOM Objekt ableiten
Man kann nicht jedem beliebigen Objekt jeden Event Typ zuweisen. Siehe HTML DOM Objekt bei w3schools
Wenn man, wie in den vorigen Beispielen aufgeführt, ein Objekt erstellt und möchte dieses Objekt quasi als DOM Objekt nutzen, so dass es auf der Website dargestellt wird und Eventlistener mit Maus-Events bekommt, muss man ein Objekt erstellen, dass von einem DOM Objekt erbt, beispielsweise von einem Image.
Das kann man mit extends erreichen. Außerdem muss man in dem Objekt die Konstruktorfunktion der Oberklasse aufrufen, das geschieht mit super().
Im folgenden wird ein "Klasse" Karte erstellt, welche beim Aufruf der Konstruktorfunktion ein Bild auf die Webseite bringt und positioniert.
Die "Klasse" Karte erbt von Image. Image ist ein Javascript Objekt. Eine der Eigenschaften von Image ist src, welche die URL zum Bild enthält.
Ich habe der Karte die Methode setPos() hinzugefügt. Sie erwartet die Werte für horizontale Position und vertikale Position.
class Karte extends Image{
constructor(imgUrl, posX, posY){
super();
this.src = imgUrl;
this.style.position = "absolute";
this.style.left = posX+"px";
this.style.top = posY+"px";
document.body.appendChild(this);
}
setPos = function(posX, posY){
this.style.left = posX+"px";
this.style.top = posY+"px";
}
}
let bild = new Karte("../img/bild1.gif", 200, 100);
bild.addEventListener("click", function(){
this.setPos(10,10);
});
Das Beispiel ist einfach, aber man kann sich leicht vorstellen, dass man sich auf diese Weise ein Objekt für ein Kartenspiel erstellen kann, welches alle Eigenschaften und Methoden, welche die Karte benötigt mitbringt. Einen Key für die Farbe (Herz, Karo, Pik, Kreuz) Einen Key für den Wert (1, 2, 3....10, Bube, Dame, König, Ass). Eine durchlaufende Nummerierung, eine Methode für das Umdrehen der Karte, etc.
Siehe auch diese Step by Step Beispiele
Die Eigenschaften eines Image Objekts
Alle Eigenschaften eines Images Objects kann man mit einer for-in Schleife aufrufen siehe Beispiel
