In diesem Tutorial lernen Sie den Umgang mit Objekten und einen Einstieg in die Objektorientierte Programmierung.

Der Kurs baut auf den beiden Tutorials Einstieg in JavaScript und JavaScript und das DOM auf.

In JavaScript gibt es 7 Datentypen. Sechs von ihnen werden als “primitive” Datentypen bezeichnet, da sie nur einfache Werte speichern können.

Im Gegensatz dazu dienen Objekte der Speicherung von Schlüssel-Wert-Paaren komplexerer Daten, sie sind also nicht mehr einfach, sondern aus anderen Werten zusammengesetzt. In JavaScript beherrschen Objekte fast jeden Aspekt der Sprache. Neben vielen vordefinierten Objekten (wie Date und Math) können Sie in JavaScript eigene Objekte erzeugen und deren Eigenschaften auslesen und Methoden aufrufen. Deshalb ist es wichtig, Objekte wirklich zu verstehen, bevor wir sie anwenden.^[1]

In der prozeduralen Programmierung wird ein Programm Zeile für Zeile abgearbeitet. Für wiederkehrende Prozeduren werden Prozeduren (in JS Funktionen genannt) aufgerufen und nach deren Beendigung wieder an die Ursprungsstelle zurückgesprungen. Das gesamte Programm wird dadurch strukturiert, indem man den Programmablauf von oben nach unten (Top-Down) in immer kleinere Teilbereiche gliedert. (Siehe: Programmieren – Vom Problem zum Plan)

Problematisch wird es, wenn man die Datenstruktur ändert: Dann muss oft das gesamte Programm durchsucht und viele einzelne Anweisungen und Funktionen angepasst werden. Eine weitere Schwachstelle ist die fehlende Abgrenzung gegenüber weiteren Skripten, sodass globale Variablen sich gegenseitig beeinflussen könnten.

Die objektorientierte Programmierung konzentriert sich im Unterschied zur prozeduralen zuerst auf die Grundstruktur der Daten und die Prozesse ihrer Verarbeitung.^[2][3] Während der Entwurfsphase wird ein Modell dieser Strukturen aufgestellt.^[4] Dieses Modell kann später flexibel angepassst werden.

In JavaScript ist es oft so, dass Ihr eigentliches Script auf Funktionen aufgebaut ist und nicht auf Objekte. Aber fast alle Programmierschnittstellen, die Ihnen der Browser anbietet, basieren auf Objekten. Wenn Sie mit JavaScript programmieren möchten, müssen Sie deswegen wissen, wie Objekte in dieser Sprache funktionieren und wie man damit umgeht. Das Erstellen eigener Objekte folgt dann als nächster Schritt.

Auf diese Weise entstehen hybride Programme, die Objekte nutzen, selbst aber eher prozedural sind. Ein kompletter Programmentwurf nach den Prinzipien der Objektorientierten Programmierung geht darüber aber noch einmal hinaus und ist weitaus komplexer. In unserem Wiki behandeln wir dieses Thema (noch) nicht.

Im Vergleich mit anderen Programmiermethoden verwendet die objektorientierte Programmierung neue, andere Begriffe.^[6][7]

Die einzelnen Bausteine, aus denen ein objektorientiertes Programm während seiner Abarbeitung besteht, werden als Objekte bezeichnet. Die Objekte werden dabei in der Regel auf Basis der folgenden Konzepte entwickelt:

Abstraktion

Jedes Objekt im System kann als ein abstraktes Modell eines Akteurs betrachtet werden, der Aufträge erledigen, seine eigenen Daten speichern und verwalten, seinen Zustand berichten und ändern und mit den anderen Objekten im System kommunizieren kann, ohne offenlegen zu müssen, wie diese Fähigkeiten implementiert sind. Solche Abstraktionen sind entweder Klassen (in der klassenbasierten Objektorientierung) oder Prototypen (in der prototypbasierten Programmierung).

Klasse

Die Datenstruktur eines Objekts wird durch die Attribute (auch Eigenschaften) seiner Klassendefinition festgelegt. Das Verhalten des Objekts wird von den Methoden der Klasse bestimmt. Klassen können von anderen Klassen abgeleitet werden (Vererbung). Dabei erbt die Klasse die Datenstruktur (Attribute) und die Methoden von der vererbenden Klasse (Basisklasse).

Prototyp

Objekte werden durch das Klonen bereits existierender Objekte erzeugt und können anderen Objekten als Prototypen dienen und damit ihre eigenen Methoden zur Wiederverwendung zur Verfügung stellen, wobei die neuen Objekte nur die Unterschiede zu ihrem Prototyp definieren müssen. Änderungen am Prototyp werden dynamisch auch an den von ihm abgeleiteten Objekten wirksam.

Botschaft

Die Idee der Objektorientierung ist, dass Objekte dadurch zusammenarbeiten, dass sie sich gegenseitig Botschaften senden. Ein Objekt, das eine Botschaft erhält, entscheidet dann, wie es damit umgeht.

Methode

Eine Methode ist eine Funktion, die ein Objekt anwendet, um auf eine Botschaft zu reagieren. Die Trennung von Botschaft und Methode ist in der OOP-Welt essenziell, denn sie ermöglicht es, unterschiedlichen Objekten die gleiche Botschaft zu schicken und den Objekten die Möglichkeit zu geben, jeweils mit ihrer individuellen Methodik darauf zu reagieren.

In vielen Programmiersprachen ist das Senden einer Botschaft an ein Objekt so designed, dass es wie der Aufruf einer Funktion aussieht, weswegen die Trennung der Konzepte Botschaft und Methode nicht immer einfach ist.

Datenkapselung

Als Datenkapselung bezeichnet man in der Programmierung das Verbergen von Implementierungsdetails. Auf die interne Datenstruktur kann nicht direkt zugegriffen werden, sondern nur über definierte Schnittstellen. Objekte können den internen Zustand anderer Objekte nicht in unerwarteter Weise lesen oder ändern. Ein Objekt hat eine Schnittstelle, die darüber bestimmt, auf welche Weise mit dem Objekt interagiert werden kann. Dies verhindert das Umgehen von Invarianten des Programms.

Vererbung

Vererbung heißt vereinfacht, dass eine abgeleitete Klasse die Methoden und Attribute der Basisklasse ebenfalls besitzt, also „erbt“. Somit kann die abgeleitete Klasse auch darauf zugreifen. Neue Arten von Objekten können auf der Basis bereits vorhandener Objektdefinitionen festgelegt werden. Es können neue Bestandteile hinzugenommen werden oder vorhandene überlagert werden.

Damals, zur Zeit des ersten Browser-Kriegs, beauftragte Netscape Communications den Programmierer Brendan Eich, eine Programmiersprache entwerfen, die im Browser läuft. Im Gegensatz zu klassenbasierten Sprachen wie C++ und Java implementierte diese Sprache, die zunächst LiveScript genannt wurde, ein auf Prototypen basierendes Vererbungsmodell. Die prototypische OOP, die sich konzeptionell von den klassenbasierten Systemen unterscheidet, war nur wenige Jahre zuvor erfunden worden, um einige Probleme zu lösen, die die klassenbasierte OOP aufwarf, und sie passte sehr gut zur dynamischen Natur von LiveScript.

Leider musste diese neue Sprache aus Marketinggründen „wie Java aussehen“. Java war die coole neue Sache in der technischen Welt, und die Führungskräfte von Netscape wollten ihre glänzende neue Sprache als „Javas kleinen Bruder“ vermarkten. Dies scheint der Grund zu sein, warum der Name in JavaScript geändert wurde. Das auf einem Prototyp basierende OOP-System sah jedoch keineswegs wie Javas Klassen aus. Um dieses prototypenbasierte System wie ein klassenbasiertes System aussehen zu lassen, entwickelten die Designer von JavaScript das Schlüsselwort „new“ und eine neuartige Art der Verwendung von Konstruktorfunktionen. Die Existenz dieses Musters und die Fähigkeit, „pseudoklassenbasierten“ Code zu schreiben, hat bei den Entwicklern zu großer Verwirrung geführt.^[8]

Hauptartikel: JavaScript/Entstehung und Standardisierung

Mit der sechsten Version von ECMAScript (ECMAScript 2015 oder kurz ES6) wurde eine klassenbasierte Syntax eingeführt, die sich an die Konventionen anderer „OOP-Sprachen“ wie Java anpasst. Das Objektkonzept von JavaScript bleibt aber unverändert prototypisch!

• MDN: Objektorientiertes JavaScript für Beginner gute Einführung mit vielen Visualisierungen
• MDN: Einführung in objektorientiertes JavaScript sehr technisch; verweist zur Veranschaulichung auf
• Wikipedia: Objektorientierte_Programmierung

Abgerufen am 9.11.2026
von "https://wiki.selfhtml.org/wiki/JavaScript/Tutorials/OOP"

• JavaScript
• Tutorial
• OOP