JavaScript/Tutorials/OOP

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In diesem Tutorial lernen Sie den Umgang mit Objekten und einen Einstieg in die Objektorientierte Programmierung. Es baut auf den beiden Tutorials Grundlagen der Programmierung und Grundlagen des DOM auf.

  1. Alles ist ein Objekt
  2. Eigenschaften und Methoden
  3. Erzeugung von Objekten
    • Objektliterale
    • Konstruktoren
  4. Klassen und Vererbung
    • Klassen
    • Vererbung


Alles ist ein Objekt[Bearbeiten]

In JavaScript gilt der Grundsatz, dass alles ein Objekt ist. Wenn wir z.B. eine Funktion definieren, dann ist die Funktion ein function-Objekt. Das macht es möglich, eine Funktion als Parameter an eine andere Funktion zu übergeben:

Funktion als Parameter übergeben 
function verdopple (x) {
  return x * 2;
}

function verdreifache (x) {
  return x * 3;
}

function tuWas (y, f) {
  return f(y);
}

tuWas(7, verdopple); // 14
tuWas(2, verdreifache); // 6
In diesem Beispiel werden drei Funktionen definiert, wovon zwei (verdopple und verdreifache) die Aufgabe haben, eine Berechnung durchzuführen und dafür ein Argument mit dem Variablennamen x entgegen nehmen. Die dritte Funktion tuWas wiederum kombiniert eine Zahl (erster Parameter mit Variablennamen y) mit einer Berechnungsfunktion (zweiter Parameter mit Variablennamen f).
Anschließend wird zwei Mal die Funktion tuWas verwendet, wobei als erstes Argument eine Zahl und als zweites Argument der Name der gewünschten Berechnungsfunktion übergeben wird. Hier funktioniert der Funktionsname wie ein Variablenname.

Das Beispiel ist kaum praxistauglich, da man die Berechnungsfunktionen auch direkt verwenden könnte, zeigt aber, dass auch Funktionen als Parameter übergeben werden können. Echte Anwendungsfälle sind die Ereignisbehandlung oder die zeitgesteuerte Ausführung von Funktionen (setInterval oder setTimeout), sowie das Konzept der Promises.

Funktionsdefinitionen[Bearbeiten]

Im obigen Beispiel haben wir drei Funktionsdefinitionen gesehen, die alle mit dem Schlüsselwort function beginnen. Damit sind sie im globalen Namensraum verfügbar und können von überall verwendet werden. Ihre Namen können wie Variablennamen benutzt werden. Es ist sogar folgende Schreibweise möglich:

Funktion in Variable 
const verdopple = function (x) { return x * 2; };

verdopple(7); // 14

const verdreifache = (x) => { return x * 3; };

verdreifache(2); // 6
In der Variable verdopple wird ein Funktionsobjekt gespeichert, welches hier als Funktionsliteral (ausgeschriebener Funktionscode) mit dem Schlüsselwort function notiert ist. Anschließend wird die Funktion über den Variablennamen und einem runden Klammernpaar aufgerufen, wobei die Zahl 5 als Argument übergeben wird.
Dasselbe wird nun für eine Variable verdreifache gemacht, nur dass hier das Funktionsliteral nicht mit dem Schlüsselwort function, sondern mit dem Zuweisungsoperator => notiert wird. Das ist eine im Sprachstandard ECMA 6 eingeführte Schreibweise, die hier das gleiche leistet.
Beachten Sie: Das Schlüsselwort const ist im Sprachstandard ECMA 6 eingeführt worden und ist bei Objekten grundsätzlich zu empfehlen, weshalb für die Variablendefinitionen kein var, sondern eben const verwendet wurde, weil die zugewiesenen Funktionsobjekte eben Objekte sind.
Beachten Sie: Die Schreibweise mit dem =>-Operator leistet nicht exakt dasselbe wie die Schreibweise mit dem Schlüsselwort function. Der Unterschied besteht darin, welchen Wert das Schlüsselwort this innerhalb der Funktion hat. Für das Beispiel ist dieser Unterschied aber unwichtig.

Was ist eigentlich ein Objekt?[Bearbeiten]

Ein Objekt ist eine Art Behälter. Es ist ein Datenkonstrukt. Es ist ein Namensraum. Es ist ein ... Objekt.

Im nächsten Schritt schauen wir uns an, wie Objekte in JavaScript aussehen.


Eigenschaften und Methoden →

Weblinks[Bearbeiten]

Sonstige Tutorials

Abgerufen von „http://wiki.selfhtml.org/index.php?title=JavaScript/Tutorials/OOP&oldid=78792“