12.5.3 OOP - Vererbung

Bei der objektorientierten Programmierung werden in einem Objekt Attribute und Operationen gemeinsam gespeichert. Damit ein Objekt während des Programmablaufs erzeugt werden kann, muss zuerst eine Objekt-Schablone erstellt werden, die Klasse genannt wird. Große Programmierprojekte werden meist von mehr als einer Person bearbeitet und damit die Kommunikation über die Struktur eines Programms erleichtert wird, werden Klassen, die in einem Projekt als Objekt-Schablonen genutzt werden, oft grafisch in einem Klassen-Diagramm dargestellt.

Die Klasse "punktKlasse" aus dem letzten Kapitel wird zum Beispiel wie folgt in einem Diagramm dargestellt:

Quellcode:

class punktKlasse {
  constructor(xkoord, ykoord, durchmesser, farbe) {
    this.xkoord = xkoord;
    this.ykoord = ykoord;
    this.durchmesser = durchmesser;
    this.farbe = farbe;
  }
  zeichnen() {
    strokeWeight(this.durchmesser);
    stroke(this.farbe);
    point(this.xkoord, this.ykoord);
  } 
}

Diagramm:

Ein Klassendiagramm besteht aus dem Klassen-Namen (hier "punktKlasse"), der im Programmcode hinter dem Schlüsselwort "class" steht, den Klassen-Attributen (hier "xkoord", "ykoord, "durchmesser" und "farbe"), die im Programmcode im "constructor" festgelegt werden und den Klassen-Operationen, die im Programmcode als Funktionen notiert sind. Je nach Programmiersprache werden andere Begriffe verwendet, aber die Struktur ist meist gleich.

Im Klassendiagramm werden keine Einzelheiten aufgeführt, denn dafür ist jeder Programmierer selbst verantwortlich. Man möchte im Klassendiagramm nur die Attribute und Operationen sehen, um den Aufbau eines Programms diskutieren zu können.

In einem kleinen Projekt soll ein Kreis und ein Viereck auf der Zeichenfläche gezeichnet werden. Die Position eines Objekts wird mit einer x- und einer y-Koordinate angegeben. In der Entwicklungsphase soll diese Koordinate markiert werden, damit die Positionierung eines Objekts auf dem Bildschirm leichter überlegt werden kann:

Der Kreis und das Viereck haben als Gemeinsamkeit, dass die Koordinate, von der aus die geometrische Figur gezeichnet wird, mit einem kleinen schwarzen Kreis markiert ist. Beide unterscheiden sich darin, wie der Kreis bzw. das Viereck dann gezeichnet wird.

In der objektorientierten Programmierung können diese Gemeinsamkeiten und Unterschiede in der Klassenstruktur abgebildet werden. Dazu legt man eine Objekt-Schablone (Klasse) mit den Attributen und Operationen fest, die alle Objekte bei der Programmausführung haben sollen.

Die Attribute und Operationen, die nur spezielle Objekte haben sollen, werden in eigenen Objektschablonen definiert. Die speziellen Objekt-Schablonen können die allgemeinen Attribute und Operationen von der allgemeinen Objekt-Schablone erben. Diese Idee wird im folgenden Klassendiagramm visualisiert.

Die allgemeine Objekt-Schablone "geoKlasse" besitzt die Attribute "xkoord", "ykoord" und "farbe" und eine Funktion "koordZeichnen", um den kleinen schwarzen Kreis auf die Koordinatenposition zu zeichnen.

Die speziellen Objekt-Schablonen "kreisKlasse" und "viereckKlasse" haben zusätzlich die Attribute, die für einen Kreis bzw. einen Viereck benötigt werden und spezielle Operationen, um diese Objekte dann zeichnen zu können.

Im folgenden Quellcode können Sie sehen, wie so etwas programmiert wird. ACHTUNG: Im Abitur müssen Sie nicht solche umfangreichen Quellcodes schreiben können. Aber damit Sie verstehen, wie die objektorientierte Programmierung funktioniert, ist es wichtig, dass Sie den gesamten Quellcode nachvollziehen können.

class geoKlasse {
  constructor(xkoord, ykoord, farbe) {
    this.xkoord = xkoord;
    this.ykoord = ykoord;
    this.farbe = farbe;
  }
  koordZeichnen() {
    strokeWeight(5);
    stroke(0);
    point(this.xkoord, this.ykoord);    
  }  
}

class kreisKlasse extends geoKlasse {
  constructor(xkoord, ykoord, farbe, durchmesser) {
    super(xkoord, ykoord, farbe);
    this.durchmesser = durchmesser;
  }
  zeichnen() {
    strokeWeight(this.durchmesser);
    stroke(this.farbe);
    ellipse(this.xkoord, this.ykoord, this.durchmesser);    
  }
}

class viereckKlasse extends geoKlasse {
  constructor(xkoord, ykoord, farbe, breite, hoehe) {
    super(xkoord, ykoord, farbe);
    this.breite = breite;
    this.hoehe = hoehe;
  }
  zeichnen() {
    strokeWeight(0);
    fill(this.farbe);
    rect(this.xkoord, this.ykoord, this.breite, this.hoehe);    
  }
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);

  let kreis1 = new kreisKlasse(60, 90, "red", 20);
  kreis1.zeichnen();
  kreis1.koordZeichnen();

  let viereck1 = new viereckKlasse(120, 160, "blue", 40, 50);
  viereck1.zeichnen();
  viereck1.koordZeichnen();
}

Denken Sie sich ein kleines Projekt aus, bei welchem Sie eine allgemeine Klasse festlegen. Erweitern Sie dann die allgemeine Klasse mit zwei speziellen Klassen, welche die allgemeine Klasse erweitern.

Sie können gerne als Vorlage das Beispielprojekt verwenden und dieses etwas anpassen.

In einem neuen Fenster starten: Ergänzung mit Dreieck