OOP mit JavaScript Grundkurs

Der new-Operator, die Deklaration eines Konstruktors und this

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Um einen Konstruktor aufzurufen, verwendet man den vorangestellten new-Operator. Das Video beschreibt Details und zeigt den Einsatz von this, um Konstruktoren explizit zu deklarieren.
09:01

Transkript

Wenn Sie ein Objekt in JavaScript erzeugen wollen, dann steht Ihnen die JSON-Notation zur Verfügung, Sie können ein Array anlegen oder eben auch eine Funktion benutzen, die nennt man einen Konstruktor. DAs schauen wir uns in diesem Video etwas genauer an. Also was einen Konstruktor auszeichnet. Denn in JavaScript ist es so, dass Sie im Grunde alles als Konstruktor-Funktion verwenden können, was nicht bei drei auf den Bäumen ist. Mit anderen Worten: Bereits so eine Funktion hier, also ohne irgendeinen Inhalt, kann in Verbindung mit dem Schlüsselwort "new" als Konstruktor verwendet werden. Sie machen einfach "new", Name der Funktion, Klammer auf, Klammer zu. Ich habe hier eine kleine Funktion; die gibt die Struktur des Objektes aus, das als Parameter übergeben wird. Also Sie sehen hier "typeof"; da muss natürlich "Object" auftauchen, aber auch der Wert einer Eigenschaft "constructor" - das ist eine Referenz auf den Konstruktor - und alle vorhandenen Eigenschaften, also Key-Value-System hier. Schauen wir uns mal an, was diese zwei Zeilen hier bereits bewirken. Natürlich mit der Ausgabe. Sie sehen also, das ist tatsächlich ein Objekt "typeof" liefert, "object", und der Wert der "constructor"-Eigenschaft verweist eben auf diese leere Funktion. Nur weil sie mit "new" aufgerufen wurde. Es gibt natürlich keine Eigenschaften bisher. So ist eine Konstruktor-Funktion natürlich ziemlich sinnlos. Ich kann das Objekt nachträglich erweitern, indem ich jetzt "obj1." und dann einen neuen Bezeichner einführe. Aber eigentlich will man mit einem Konstruktor ja bereits Eigenschaften anlegen, beziehungsweise sie auch gleich initialisieren. Ich habe hier einige Codes vorbereitet und die schauen wir uns mal an. Das hier ist eine typische Konstruktor-Funktion. Das heißt, hier initialisiere ich Eigenschaften und lege sie auch an. Das entscheidende Schlüsselwort hier ist "this". Denn man verankert in einer typischen Konstruktor-Funktion alle Eigenschaften über "this". Das ist eine Referenz auf das aktuelle Objekt. Man verankert alle Eigenschaften also über "this", aktuelles Objekt". Und dann werden in der Konstruktor-Funktion alle gewünschten Eigenschaften eines Objekts hinzugefügt. Zeile 12 ist jetzt ganz interessant, denn Sie können daraus bereits aus dem Namen der Eigenschaft schließen, dass das eine Methode sein soll. Methoden werden über Referenzen in Objekten verankert. Und das bedeutet, dass das hier die Funktionsreferenz ist und das der Funktionszeiger in dem Fall auf eine extern deklarierte Funktion. Das ist möglich. Es ist vom Design nicht perfekt, weil Sie damit keine Kapselung im Sinn erreichen. Normalerweise sollte diese Funktion hier drin stehen. Wir werden gleich sehen, wie man so etwas machen kann. Aber rein technisch ist das damit eine Methode, die in dem Konstruktor hier verankert wird. Es ist übrigens kein Zufall, dass diese Funktion mit einem Großbuchstaben beginnt und diese als auch diese mit Kleinbuchstaben. Das ist Konvention. Eine Konstruktor-Funktion sollte mit einem Großbuchstaben beginnen. Das ist zumindest eine Konvention, die sehr oft eingehalten wird. Das resultiert daraus, dass in Java oder C# Konstruktor-Methoden den gleichen Namen haben, wie die Klasse, in der sie sich befinden. Das ist hier in JavaScript nicht zwingend, aber es ist eine gute Konvention um zu erkennen, dass das eigentlich eine Konstruktor-Funktion sein soll. Ich kann hier auch von Konstruktor-Methode reden; das unterscheidet sich in JavaScript ja nicht direkt. Die Parameter, die übergeben werden, die werden hier zugewiesen, das heißt, wir initialisieren das Objekt am Anfang. Und es ist kein Zufall ebenso, dass der Name der Parameter mit dem Namen der zu initialisierenden Eigenschaft übereinstimmt. Durch "this." kann man eindeutig unterscheiden, ob man die Eigenschaft, oder eben diese lokale Variable benutzen möchte. Und die Zuordnung ist eindeutig. Es ist gängige Praxis, das so zu machen; nicht Zufall. Sie müssen es allerdings nicht. Das heißt, man kann den Namen der Eigenschaft und den Namen des Parameters durchaus unterschiedlich wählen. Aber es ist wie gesagt sehr gut zu erkennen, wenn die Namen gleich sind. Wir schauen uns mal an, was jetzt hier rauskommt bei diesem Beispiel. Ich instanziiere hier dieses Objekt und gebe auch die Objektstruktur aus, und dann rufe ich die Methode "reden" auf. Und das ist jetzt hier die Ausgabe. Sie sehen wieder die erste Ausgabe, das heißt vom ersten Objekt, und ab hier dann von dem zweiten Objekt. Wir haben wieder natürlich "typeof: object" Der Wert der Konstruktor-Eigenschaft verweist jetzt auf die Funktion "Person". Und hier haben wir die Struktur, die Deklaration. Und dann bekommen wir alle Key-Value-Systeme die in dem Objekt vorhanden sind. Auch hier bei der Methode "reden" die Deklaration. Und das ist jetzt der Aufruf dieser Methode. Nun gab es noch eine kleine Baustelle. Diese ausgelagerte Deklaration der Methode "reden" das ist ein bisschen unschön. Wie können wir die Sache jetzt kapseln? Was halten Sie davon? Sie machen wieder "this.reden" ist gleich und weisen eine anonyme Funktion zu. Der Name der Variablen, oder des Bezeichners hier muss eben nicht mit diesem übereinstimmen, oder diesem. Genauso einen Fall haben wir jetzt. Wir können hier eine anonyme Funktion verwenden. Damit haben wir das System auch sauber gekapselt und in der Konstruktor-Methode steht alles drin, was das Objekt nachher an Eigenschaften und Methoden bereitstellt. Sie haben also gesehen, dass ein Konstruktor in JavaScript im Grunde eine normale Funktion ist, die aber insbesondere über das Schlüsselwort "this" alle Eigenschaften verankern kann, auch Methoden, und dann mittels dem Schlüsselwort "new" aufgerufen wird, um das Objekt zu erzeugen.

OOP mit JavaScript Grundkurs

Sehen Sie, wie Sie mit JavaScript objektorientiert programmieren können.

3 Std. 8 min (35 Videos)
Derzeit sind keine Feedbacks vorhanden...
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:09.03.2017

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!