JavaScript: OOP – Klassen, Methoden und Vererbung

Mit JavaScript ist es möglich Objekt Orientiert zu programmieren (OOP). Dies bedeutet das der Code eine modulare Struktur aufweist, der Vorteil bei dieser Programmierart ist die Wartbarkeit sowie die Erweiterbarkeit. Wenn der Code gut entworfen wurde, ist es einfacher den Code zu verstehen. Mit einer Klasse ist es möglich Variablen und Methoden (Funktionen) zu einem Modul zu bündeln. Aus diesem Modul können dann beliebig viele Objekte erstellt werden, mit diesem Objekten sind die Methoden und Variablen verknüpft. Dabei hat aber jedes Objekt seine eigenen Variablen, sprich die Objekte teilen sich nicht die Variablen.

Klasse definieren

In JavaScript wird eine Klasse mit „class“ definiert, nach „class“ folgt der Name der Klasse. Es ist zu empfehlen einen Constructor zu verwenden, dies ist eine Methode die beim erstellen des Objekts ausgeführt wird.

class einfachesMathe {
  constructor(zahlEins, zahlZwei) {
    this.zahlEins = zahlEins;
    this.zahlZwei = zahlZwei;
  }
}

In diesem Beispiel wird die Klasse einfachesMathe erstellt, es werden 2 Parameter beim erstellen des Objektes in die Klasse gespeichert. Das this. gibt an, dass die Variablen Klassen intern gespeichert werden, sprich die beiden Werte können von jeder Methode in der Klasse benutzt werden.

Objekt erstellen

Mit „new“ kann von einer Klasse ein Objekt erstellt werden. In diesem Beispiel werden 2 Parameter übergeben, 2 und 5. Das erstellte Objekt wird in die Variable aufgabe gespeichert, mittels dieser Variable kann dann auf das Objekt zugegriffen werden.

var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.zahlEins); // gibt 2 aus
console.log(aufgabe.zahlZwei); // gibt 5 aus

Dabei sollte aber drauf geachtet werden, dass die Klasse zuerst definiert wurde. Bei Funktionen ist dies egal ob zuerst der Funktionsaufruf kommt und dann die Funktion, aber bei Klassen muss zuerst die Klasse erstellt worden sein.

var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.zahlEins);
console.log(aufgabe.zahlZwei);
class einfachesMathe {
  constructor(zahlEins, zahlZwei) {
    this.zahlEins = zahlEins;
    this.zahlZwei = zahlZwei;
  }
}
// Uncaught ReferenceError: einfachesMathe is not defined

class einfachesMathe {
  constructor(zahlEins, zahlZwei) {
    this.zahlEins = zahlEins;
    this.zahlZwei = zahlZwei;
  }
}
var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.zahlEins);
console.log(aufgabe.zahlZwei);
// 2
// 5

Methoden

Methoden sind Funktionen innerhalb einer Klasse. Es gibt 4 Arten von Methoden in einer Klasse, „get“ es werden Daten aus der Klasse geholt, „set“ übergibt an die Klasse Daten, „static“ sind nicht Objekt gebundene Methoden und werden als Helfer Methoden benutzt, des weiteren gibt es noch interne Methoden, bei diesen schreibt man einfach nur den Namen.

get Methode

Wie der Name schon verrät, holt man sich Daten aus der Klasse mit der Methoden art.

class einfachesMathe {
  constructor(zahlEins, zahlZwei) {
    this.zahlEins = zahlEins;
    this.zahlZwei = zahlZwei;
  }
  addieren(){
    return this.zahlEins + this.zahlZwei;
  }
  get addition(){
    return this.addieren();
  }
}
var aufgabe = new einfachesMathe(2, 5);
console.log(aufgabe.addition);
// 7

Bei get werden keine runden Klammern benutzt, da diese Methode keine Parameter erlaubt.

set Methode

Mit set erstellt man eine Methode die Daten an die Klasse übergibt. Es ist nur ein Parameter erlaubt.

class einfachesMathe {
  constructor(zahlEins, zahlZwei) {
    this.zahlEins = zahlEins;
    this.zahlZwei = zahlZwei;
  }
  set setzeZahlEins(zahl){
    this.zahlEins = zahl;
  }
  set setzeZahlZwei(zahl){
    this.zahlZwei = zahl;
  }
}
var aufgabe = new einfachesMathe(2, 5);
aufgabe.setzeZahlEins = 3;
aufgabe.setzeZahlZwei = 8;

Falls man doch mehrere Werte übergeben möchte, kann dies durch ein Array umgangen werden.

class einfachesMathe {
  constructor(zahlEins, zahlZwei) {
    this.zahlEins = zahlEins;
    this.zahlZwei = zahlZwei;
  }
  set neueZahlen(zahlen){
    this.zahlEins = zahlen[0];
    this.zahlZwei = zahlen[1];
  }
}
var aufgabe = new einfachesMathe(2, 5);
aufgabe.neueZahlen = [3,8];

static Methoden

Static Methoden sind Objekt übergreifend, dies bedeutet, dass 2 Objekte miteinander vergleicht werden können.

class einfachesMathe {
  constructor(zahl) {
    this.zahl = zahl;
  }
  get getZahl(){
    return this.zahl;
  }
  static groeszer(objektA, objektB){
    if(objektA.getZahl > objektB.getZahl)
      return objektA;
    else
      return objektB;
  }
}
var zahl1 = new einfachesMathe(5);
var zahl2 = new einfachesMathe(8);
einfachesMathe.groeszer(zahl1, zahl2).getZahl;
// 8

Static Methoden werden immer auf die Klasse angewendet und nicht auf das Objekt

interne/private Methoden

Interne Methoden sind Methoden die nur innerhalb der Klasse benutzt werden. Diese Methoden sollten nicht von außen ausgeführt werden. Am besten schreibt man noch ein _ vor den Methodennamen, damit erkennbar wird das dies eine interne bzw. private Methode ist. Diese Methoden sind trotzdem von außen abrufbar, aber dies sollte vermieden werden, da sonst der Code unsauber wird.

class einfachesMathe {
  constructor(zahl1, zahl2) {
    this.zahl1 = zahl1;
    this.zahl2 = zahl2;
  }
  _berechneAddition(){
     return this.zahl1 + this.zahl2;
  }
  get getAddition(){
    return this._berechneAddition();
  }
}
var aufgabe = new einfachesMathe(5, 6);
aufgabe.getAddition;
// 11

Vererbung von Klassen

Klassen Vererbung bedeutet, dass die Klasse die Methoden und Variablen von einer anderen Klasse übernimmt. Damit ist es möglich unspezifische Methoden in einer Klasse zu definieren und dann auf andere Klassen zu vererben

class zahlen{
  constructor(zahl1, zahl2) {
    this.zahl1 = zahl1;
    this.zahl2 = zahl2;
  }
  set setZahlen(zahlen){
     this.zahl1 = zahlen[0];
     this.zahl2 = zahlen[1];
  }
  get getZahlen(){
     return [this.zahl1, this.zahl2];
  }
}
class addition extends zahlen{
  _berechneAddition(){
     return this.zahl1 + this.zahl2;
  }
  get getAddition(){
    return this._berechneAddition();
  }
}
class subtraktion extends zahlen{
  _berechneSubtraktion(){
     return this.zahl1 - this.zahl2;
  }
  get getSubtraktion(){
    return this._berechneSubtraktion();
  }
}
var aufgabe = new addition(5, 6);
aufgabe.getAddition; // 11
aufgabe.getZahlen; // [5,6]
var aufgabe2 = new subtraktion(8, 5);
aufgabe2.getSubtraktion; // 3
aufgabe2.getZahlen; // [8,5]

super

„super“ wird verwendet, wenn von der Elternklasse eine Methode aufgerufen werden soll. Es kann vorkommen das die Klasse und die Elternklasse gleichnamige Methoden beinhalten, durch „super“ wird dann die Methode aus der Elternklasse verwendet und bei „this“ die Methode aus der eigenen Klasse.

class vergleich {
  constructor(zahl) {
    this.zahl = zahl;
  }
  _check(){
    if(this.zahl == 1)
      return true;
    else
      return false;
  }
}
class zahlenvergleich extends vergleich{
  _check(){
    if(this.zahl == 2)
      return true;
    else
      return false;
  }
  get getVergleich(){
    return [this._check(), super._check()];
  }
}
var test = new zahlenvergleich(2);
test.getVergleich; // [true, false]