SELF-Treffen in Mainz 2023

Die Mitgliederversammlung findet am 25.11.2023 um 10:00 statt; davor und danach gibt es Gelegenheiten zum gemütlichen Beisammensein.
Weitere Informationen und eine Anmeldemöglichkeit gibt es in der Veranstaltungs-Ankündigung.

JavaScript/Tutorials/OOP

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche
OOP-icon.svg
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 Einstieg in das DOM auf.

  1. Einstieg
    • prozedural vs objektorientiert
    • Entstehung von JavaScript
  2. Objekte und ihre Eigenschaften
    • Objektliterale
    • Eigenschaften und Methoden
    • this
    • Konstruktoren und Instanzen
  3. Klassen und Vererbung
    • class (ES6)
      • Vererbung mit extends
      • Kapselung mit static
    • Prototypische Vererbung (ES3)
  4. Module und Kapselung
    • Kapselung vs. Verfügbarkeit
    • export
    • import
    • import() - Laden bei Bedarf
    • Revealing Module Pattern (ES3)
  5. Objektverfügbarkeit und this
  6. Objektabfragen
  7. Benutzer:Rolf_b/Objektbeziehungen



Einstieg

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]

Konzepte

prozedural vs objektorientiert

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: Einführung in die Programmierlogik)

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.

Beachten Sie, dass die prozedurale Programmierung und die OOP zwei Programmierparadigmen sind, die sich nicht gegenseitig ausschließen, sondern ergänzen.

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.

Begriffe

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

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.

Entwicklung der OOP in JavaScript

Damals, zur Zeit des ersten Browser-Kriegs, sollte Brendan Eich eine Sprache 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 kleiner 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.[7]

Hauptartikel: JavaScript/Tutorials/DOM#Was ist JavaScript?

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!

Hinweis:

Dieser Kurs verwendet die neue Klassensyntax. Er ist eine Überarbeitung des Selfhtml-aktuell-Artikels Organisation von JavaScripten von Mathias Schäfer aus dem Jahre 2006/2008. Damals war die Idee des Unobtrusive JavaScript revolutionär; allerdings mussten für einige DOM-Methoden Frameworks bemüht werden.

Der Kurs wurde im Jahre 2021 neu konzeptioniert und behandelt nicht zuerst die Unterschiede von JavaScript gegenüber „herkömmlichen“ Programmiersprachen, sondern benutzt die evtl. schon aus dem Informatikunterricht bekannte Klassen-Syntax, bevor er sich mit den von anderen Programmiersprachen abweichenden Konstruktoren und Instanzen beschäftigt.

Weblinks

  1. ↑ So we must understand them first before going in-depth anywhere else.
    Just what is OOP Programming? von Robin Debreuil
    Eine Einführung in das mit JS verwandte ActionScript, mit dem Flash-Animationen programmiert wurden
  2. ↑ lerneprogrammieren: Was ist Objektorientierung?
  3. ↑ Wikipedia: Objektorientierte Programmierung
  4. ↑ it-talents.de: prozedurale vs. objektorientierte Programmierung
  5. ↑ Wikipedia: Objektorientierte Programmierung Konzepte
  6. ↑ zum.unterrichten.de: Grundbegriffe der OOP
  7. ↑ alistapart: Prototypal Object-Oriented Programming using JavaScript von Mehdi Maujood (April 26, 2016)
Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/OOP&oldid=91584“