Objektorientierte Programmierung – Programmieren lernen mit JavaScript – Thytos
Nächstes Video startet in 3 Sekunden.
Programmieren lernen mit JavaScript

Objektorientierte Programmierung

Der Un­ter­schied zwi­schen ob­jekt­orien­tier­ter und pro­ze­du­ra­ler Pro­gram­mie­rung ist we­ni­ger ein tech­ni­scher als eher ein kon­zep­tio­nel­ler: Wäh­rend sich die pro­ze­du­ra­le Pro­gram­mie­rung an der Funk­tions­wei­se des Comp­u­ters orien­tiert, orien­tiert sich die ob­jekt­ori­en­tierte an der ech­ten Welt.

Die prozedurale Programmierung richtet sich an der Funktionsweise von Rechnern aus: Anweisungen werden nacheinander ausgeführt. Im Laufe der Zeit haben sich Programmiersprachen entwickelt und neue Möglichkeiten geschaffen: Anweisungen konnten zu Prozeduren zusammengefasst werden, um Code wiederzuverwenden und zu abstrahieren; Module fassen ein Paket von Prozeduren zusammen. Doch diese Entwicklung war weiterhin auf Linie mit dem Prinzip der Arbeitsweise von Computern.

Das änderte sich mit dem Aufkommen der Objekt-Orientierten Programmierung (OOP). Statt Prozesse stehen hier Objekte im Zentrum, wie sie auch in der realen Welt vorkommen. Objekte besitzen Eigenschaften, haben Zustände und können Tätigkeiten ausführen. Und sie haben eine Identität.
Diesen Denkansatz in die Programmierung einzuführen, war der Schlüssel, um die steigende Komplexität von Programmen bewältigen zu können.

There hasn't ever been a real revolution in how we created software, certainly not in the last twenty years. As a matter of fact, it's gotten worse: While the Macintosh was a revolution for the end user to make it easier to use, it was the opposite for the developer. […] Software got much more complicated to write. […]
We have taken another one of those brilliant original ideas at Xerox PARC […] called Object-Oriented Technology and we have perfected it and commercialised it. […]
This object technology let's you build software ten times faster.
Steve Jobs in einem Interview von 1995, PBS, Triump of the Nerds

Konkrete Erscheinungsform in JavaScript

Die technische Umsetzung wirkt auf den ersten Blick gar nicht so revolutionär. Denn auch in der objekt-orientierten Programmierung werden Anweisungen und Prozeduren geschrieben – schließlich ist auch JavaScript eine objekt-orientierte Programmiersprache und trotzdem ist das, was ihr in der Serie bisher mitbekommen habt, keine objekt-orientierte Programmierung gewesen.

Ein Vergleich von objekt-orientierter und prozeduraler Programmiersprache zeigt konkrete Unterschiede.

JavaScript PHP
"string".length strlen('string');
["ar", "ray"].length count($array);

In der prozeduralen Programmierung werden unterschiedliche Funktionen für unterschiedliche Entitätstypen benötigt, obwohl sie in diesem Beispiel kontextuell das gleiche Ziel haben, nämlich die Länge des übergebenen Wertes auszulesen.

In JavaScript wird das Objekt keiner Funktion übergeben, stattdessen wird eine Funktion oder Attribut am Objekt aufgerufen. Beide Objekte haben eine gleiche Schnittstelle, nämlich das Attribut .length zum Auslesen der Länge des Objekts, und können dabei unterschiedliche Implementierungen haben.

In der OOP wird das zusammengefasst, was zusammengehört, und dadurch das voneinander getrennt, was getrennt gehört.

Die Implementierung von Schnittstellen, im Englischen Interfaces, ist gängig in objekt-orientierten Programmiersprachen. Das Konzept von Objekten schließt Verkapselung mit ein: Wie ein Objekt intern funktioniert und was genau es tut, müssen die, die es verwenden und ansprechen, gar nicht wissen; wichtig ist nur, die Schnittstelle zu kennen, die Methoden und Attribute, die das Objekt zur Verfügung stellt.
Vielleicht wirken diese Beschreibungen auf euch noch etwas abstrakt und wenig greifbar. Das Verständnis kommt mit der Praxisarbeit. Je mehr ihr objekt-orientiert programmiert, desto mehr entwickelt sich euer Verständnis des Konzepts.

Ein Attribut hängt an einem Objekt und kann in JavaScript durch die Punkt-Notation oder die Klammer-Notation erreicht werden. Die Punkt-Notation kennt ihr vom Auslesen der Länge und die Klammer-Notation vom Auslesen einzelner Stellen.

// Punkt-Notation
array.length
object.property

// Klammer-Notation
array[0]
object["property"]

Mit der gleichen Notation können Attribute auch an ein Objekt gehängt werden.
Öffnet eure Konsole, um den folgenden Code selbst auszuprobieren.
Erstellt eine Variable, der ihr ein leeres Array zuweist.

var arr = [];

Wenn ihr in eurer Konsole arr. schreibt, klappt sich (abhängig davon, welchen Browser ihr benutzt) eine Liste auf.

Diese Liste zeigt alle Properties, alle Attribute, die das Objekt besitzt. Noch nicht in der Liste ist das Objekt foo. Das ändert sich, wenn ihr das Attribut foo am Objekt arr erstellt und auf einen Wert setzt. Im Beispielfall wird es auf eine Funktion gesetzt, die foo in einem Dialogfenster ausgibt.

arr.foo = function () { alert("foo"); };

Nach der Definition von foo taucht das Attribut in der Liste aller Attribute auf

Am Array steht nun auch die Methode foo zur Verfügung und kann aufgerufen werden. Auch beim Aufrufen einer Methode sind sowohl Punkt- als auch Klammer-Notation möglich.

arr.foo();
arr["foo"]();

Vergleichen von Objekten

Mit den Vergleichsoperatoren können Werte verglichen werden, um zu prüfen, ob ein Wert einem anderen entspricht.

5 === 5
// => true

"foo" === "foo"
// => true

Diese Vergleiche funktionieren nicht bei Objekten.

["foo"] === ["foo"]
// => false

// Auch mit dem einfachen Gleich nicht

["foo"] == ["foo"]
// => false

Das liegt daran, dass in JavaScript Objekte als Referenz gespeichert werden und ein Vergleich diese Referenzen einander gegenüberstellt.
Was das genau bedeutet, erfahrt ihr im nächsten Artikel.