Objektorientierung in JavaScript

Schnelles Code-Beispiel

//Möglichkeit 1: Objekt mit Literal-Schreibweise erstellen
var auto = {modellname: "BMW 5er",
            farbe: "blau",
            geschwindkeit: 200,

            beschleunigen: function(){ },
            bremsen: function(){ },
};

//Möglichkeit 2: Objekt von Klasse ableiten
class Auto{
    constructor(modellname, farbe, geschwindigkeit){
        this.modellname = modellname;
        this.farbe = farbe;
        this.geschwindigkeit = geschwindigkeit;
    }

    beschleunigen(){ }
    bremsen(){ }
}

// Objekt instanziieren
var auto2 = new Auto("BMW 5er", "blau", "200");

Inhaltsverzeichnis

1. Was bedeutet Objektorientierung?
2. Objekte erstellen mit Literal-Schreibweise
3. Objekte von Klassen erstellen
4. Welchen Weg zur Objekterstellung wählen?
5. Übungen

Was bedeutet Objektorientierung?

Größere Software-Projekte werden schnell enorm komplex. Um unsere Programme besser zu strukturieren und durch ein modulares System zu vereinfachen, können wir in JavaScript die objektorientierte Programmierung (OOP) einsetzen.

• Ein objektorientiertes Software-Design beschreibt ein Programm durch einzelne Objekte.

Was bedeutet das? In den vergangenen Kapiteln haben wir viel mit den einfachen (primitiven) Datentypen Number, String, Boolean gearbeitet. Wir haben gelernt, dass wir Werte dieser Datentypen in einer Variablen speichern können:

var auto = "BMW 5er";

Ein Objekt dagegen ist etwas ganz anderes! Es ist ein komplexer Datentyp, der einen Zustand und ein Verhalten hat. Der Zustand wird durch mehrere einfache Daten, den Eigenschaften, beschrieben und das Verhalten durch Funktionen, die im Kontext der OOP Methoden genannt werden.

Stellen Sie sich in der wirklichen Welt ein Auto vor. Ein Auto ist ein Objekt, das aus mehrere Eigenschaften besteht. Es hat zum Beispiel einen Modellnamen, eine Farbe und einen (aktuellen) Geschwindigkeitswert. Gleichzeitig kann ein Auto auch verschiedene Dinge "tun", wie etwa beschleunigen oder bremsen.

Diese Einteilung in Eigenschaften und Methoden ("Fähigkeiten") von Objekten ist für uns alle ganz natürlich. Wie übertragen wir es nun in JavaScript?

Objekte erstellen mit Literal-Schreibweise

In JavaScript gibt es unterschiedliche Wege, wie wir Objekte erstellen können. Eine davon ist die Literal-Schreibweise:

var auto = {
    // Eigenschaften
    modellname: "BMW 5er",
    farbe: "blau",
    geschwindkeit: 200,

    // Methoden
    beschleunigen: function(){
        this.geschwindkeit += 20;
    },
    bremsen: function(){
        this.geschwindkeit -= 20;
    },
};

Wir haben mit diesem Code ein konkretes Auto-Objekt beschrieben. Unser Programm weiß nun, welche Eigenschaften und Werte das Objekt hat und was es durch seine Methoden tun kann.

Die Syntax der Literal-Schreibweise zur Objekterzeugung kann am Anfang etwas gewöhnungsbedürftig sein. Merken Sie sich folgende Regeln:

• Doppelpunkt: Bei Eigenschaften wird der Wert bzw. bei Methoden die Funktionsdefinition nach einem Doppelpunk geschrieben.
• Kommaseperation: Eigenschaften und Methoden sind stets mit einem Komma voneinander getrennt.

this

Sicher ist Ihnen im Code das Schlüsselwort this aufgefallen. In JavaScript bezieht sich this innerhalb eines Objektcodes auf das Objekt selbst. this.geschwindigkeit += 20 meint also: Erhöhe den Wert der Eigenschaft geschwindigkeit in diesem Objekt um 20.

Würden wir this auslassen, würde das Programm nach einer Variablen geschwindigkeit außerhalb des Objektcodes suchen - was ja eben nicht erwünscht ist und überdies zu einem Fehler führt, da es eine solche ja nicht gibt.

Referenzvariable

Damit wir auf das Objekt auch zugreifen können, verbinden wir es mit der Variablen auto. Anders als primitive Datentypen (boolean, number, string) wird das Objekt also nicht in der Variablen gespeichert. Vielmehr ist es so, dass die Variable auf das Objekt verweist.

• Man nennt eine Variable, die auf ein Objekt verweist, Referenzvariable.

Erst durch die Referenzvariable wird es überhaupt erst möglich, das Objekt zu benutzen. In gewisser Weise funktioniert die Variable dann wie eine "Fernsteuerung" auf das Objekt.

Objekte aufrufen

Über die Referenzvariable können wir auf die Eigenschaften und Methoden eines Objekts zugreifen. Dabei nutzen wir den Punkt-Operator und anschließend den Namen der Eigenschaft bzw. der Methode:

auto.beschleunigen(); // erhöhe den Wert von geschwindigkeit um 20
console.log(auto.modellname); // BMW 5er
console.log(auto.farbe); // blau
console.log(auto.geschwindkeit); // 220

Objekte von Klassen erstellen

Die zweite Möglichkeit in JavaScript Objekte zu erstellen, führt über die Verwendung von Klassen.

Man muss eine Klasse als einen Bauplan (Blaupause) für Objekte begreifen. Eine Klasse beschreibt nämlich, welche Eigenschaften und Methoden die von ihr abgeleiteten Objekte haben sollen:

Hier sehen wir ein vereinfachtes Klassendiagramm, das die Klasse Auto beschreibt. Alle Objekte, die von dieser Klasse abgeleitet werden, haben drei Eigenschaften (modellname, farbe, geschwindigkeit) und können zwei Dinge tun, nämlich beschleunigen und bremsen. Natürlich ist das sehr stark vereinfacht, aber uns geht es ja zunächst einmal um das Grundprinzip.

Was aber entscheidend ist: Die einzelnen Objekte entstammen zwar derselben Klasse, stellen aber ganz individuelle Repräsentation dieser Klasse dar. Sie sind zwar alle Autos, mit denselben Eigenschaften und Methoden. Aber: Sie können sich hinsichtlich der ausgeprägten Werte voneinander unterscheiden, denn es sind verschiedene, zunächst einmal unabhängig voneinander existierende Objekte.

Klasse definieren

Der Code der Klasse Auto sieht in JavaScript entsprechend so aus:

class Auto{
    constructor(modellname, farbe, geschwindigkeit){
        this.modellname = modellname;
        this.farbe = farbe;
        this.geschwindigkeit = geschwindigkeit;
    }

    beschleunigen(){
        this.geschwindkeit += 20;
    }
    bremsen(){
        this.geschwindkeit -= 20;
    }
}

Klassen werden in JavaScript mit dem Schlüsselwort class definiert. Es folgt der Name der Klasse, der konventionell mit Großbuchstabenen beginnt. Anschließend wird eine geschweifte Klammer { gesetzt, die den Klassenkörper öffnet. Innerhalb dieses Bereichs wird der gesamte Klassencode geschrieben. Ganz am Ende wird die Klasse mit } geschlossen.

Innerhalb des Klassenkörpers werden dann die einzelnen Eigenschaften und Methoden der Klasse definiert.

Eine besondere Rolle nimmt die Konstruktur-Methode constructor ein (die auch exakt so geschrieben sein muss): constructor wird für die Objekt-Erstellung benötigt und dabei implizit aufgerufen.

Wir können in einen Konstruktor außerdem alle möglichen Anweisungen packen. Diese werden dann direkt bei der Objekterzeugung automatisch ausgeführt. In unserem Fall werden die drei Eigenschaften modellname, farbe und geschwindigkeit mit gültigen Werten belegt. Diese Werte wurden zuvor als Argumente dem Konstuktor übergeben.

Objekte erzeugen

Bisher haben wir nur eine Klasse definiert, aber noch keine Objekte von diesem "Bauplan" abgeleitet. Um ein neues Objekt der Klasse Auto zu erstellen (Fachwort: instanziieren), verwenden wir folgende Schreibweise:

var auto1 = new Auto("VW Polo", "silber", "100");

Gehen wir diesen Code einmal Schritt für Schritt durch:

Wir erzeugen ein neues Objekt ("Instanz"), das wir mit dem new-Operator und dem Klassennamen ins Leben rufen. Das neu erzeugte Objekt wird der Variablen auto1 zugewiesen. Bei dieser Variablen handelt es sich wiederum um eine Referenzvariable, denn sie speichert das Objekt nicht, sondern stellt nur einen Verweis auf das Objekt dar.

Noch ein Wort zur Parameterliste: Der Konstruktor der Klasse Auto schreibt ja vor, dass wir bei der Objekterzeugung 3 Werte mitgeben müssen - und so tun wir es auch.

Im Zusammenspiel mit der Konstruktur-Methode und dem new-Operator haben wir ein Objekt der Klasse Auto erstellt:

Der Vorteil einer Klassendefinition ist, das wir nun mehrere Objekte desselben Typs (aber mit unterschiedlicher Ausprägung) nach Bauplan quasi am "Fließband" erstellen können:

var auto1 = new Auto("VW Polo", "silber", "100");
var auto2 = new Auto("BMW 5er", "blau", "200");
var auto3 = new Auto("Audi A3", "silber", "200");
var auto4 = new Auto("Mercedes A", "schwarz", "200");
var auto5 = new Auto("Scoda Octavia", "schwarz", "200");
// usw

Objekte aufrufen

Objekte, die über Klassen erstellt sind, werden genauso wie Objekte, die durch die Literal-Schreibweise erzeugt wurden, über die Referenzvariable und dem Punktoperator "angesteuert":

console.log(auto1.modellname); // VW Polo
console.log(auto1.farbe); // silber
console.log(auto1.geschwindigkeit); // 100
auto1.beschleunigen(); // geschwindigkeit = 120

Welchen Weg zur Objekterstellung wählen?

Wir kennen nun zwei unterschiedliche Wege, Objekte in JavaScript zu erstellen (tatsächlich gibt noch weitere, die aber altmodisch sind bzw. kaum gebraucht werden und darum hier nicht besprochen wurden).

Stellt sich die Frage: Soll ich zur Objekt-Erstellung die Literal-Schreibweise oder den Weg über die Klassensyntax wählen?

Das Handling der instanziierten Objekte ist jedenfalls identisch: Wir erstellen eine Referenzvariable, die auf das Objekt verweist, und mit der wir es mit Hilfe des Punkt-Operators steuern können.

• Literal-Schreibweise: Einzelne Objekte werden direkt und "on the fly" erstellt. Sehr sinnvoll, wenn man nur ein Objekt eines Typs benötigt - für "Einweg-Objekte" sozusagen.
• Klassensyntax: Objekte werden nicht direkt erstellt, sondern es muss zuerst eine Klasse (der Bauplan für Objekte) geschrieben werden. Erst dann können Objekte mit dem new-Operator von dieser Klasse abgeleitet werden. Dieser Weg ist dann sinnvoll, wenn wir mehrere Objekte eines Typs benötigen.

Wir sehen, dass beide Wege zur Objekterstellung in JavaScript ihre Daseinsberechtigung haben. Es kommt also ganz auf den Kontext an, welcher Weg der geeignetere ist. Auf jeden Fall werden Sie beide Möglichkeiten im Programmieralltag benötigen und sollten daher beide beherrschen 🙂

Übungen

class Mitarbeiter{
    constructor(name, personalnummer){
        this.name = name;
        this.personalnummer = personalnummer;
    }

    arbeiten(){
        console.log("Man at Work!");
    }
}

var m1 = new Mitarbeiter("Tim Tiske", 1234);
var m2 = new Mitarbeiter("Marlon Makolp", 1235);
hund1.arbeiten();

// Objekt erzeugen
var planet = {
        // Eigenschaften
        name: "Mars",
        bewohnt: false,
        durchmesserInKm: 6790,

        // Methoden
        infos: function(){
            console.log(this.name + ", " + this.bewohnt + ", " + this.durchmesserInKm);
        },
    };

// Methode auf Objekt aufrufen
planet.infos();

// Klassendefinition:
class Katze{
    constructor(rasse, name){
        this.rasse = rasse;
        this.name = name;
        this.alter = 0;
    }

    miauMachen(){
        console.log("Miau!");
    }

    alterErhoehen(){
        this.alter++;
    }

    detailsAusgeben(){
        console.log("Name: " + this.name + ", Rasse: " + this.rasse + ", Alter: " + this.alter);
    }

}

// Objekt erzeugen
var k1 = new Katze("Siam", "Simba");

// Methoden auf Objekt aufrufen
k1.miauMachen(); // Miau!
k1.alterErhoehen(); // Alter + 1
k1.detailsAusgeben(); // Name: Simba, Rasse: Siam, Alter: 1