Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

OOP mit JavaScript Grundkurs

Mit Object.create() Objekte erstellen

Testen Sie unsere 2016 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Über Object.create() können Sie in neuen Versionen von JavaScript ein Objekt erstellen, das auf einem optionalen Prototypen basiert und sich um optionale Eigenschaften erweitern lässt. Die Eigenschaften lassen sich dabei aufzählbar oder verborgen definieren. Dieser Ansatz der Objekterzeugung ist ziemlich "objektorientiert".
08:09

Transkript

Wenn Sie in JavaScript einen Konstruktor erstellen, definieren Sie im Grunde eine Funktion. Sie müssen nur gewisse Regeln beim Aufbau der Funktion berücksichtigen, also mit "this" die Eigenschaft verankern und schon können Sie diese Funktion sinnvoll benutzen, um ein Objekt zu erzeugen. Im Grunde können Sie ja jede Funktion über "new" verwenden, um ein Objekt zu erzeugen. Es gibt noch einen weiteren Ansatz, womit man in JavaScript Objekte erzeugen kann, und zwar einen sehr "objektorientierten". Es gibt eine Methode "create" von "object". Und darüber kann man auch Objekte erzeugen. Das ist ein wenig an objektorientierten Sprachen orientiert, die für einen Konstruktor einen definierten Namen benutzen. "create" ist ja sehr naheliegend für eine Konstruktor-Funktion, beziehungsweise in diesem Fall eine Konstruktor-Methode. Man gibt als ersten Parameter optional einen Prototyp an. Und dann deklariert man die Eigenschaften des Objektes, die gewünschten Eigenschaften des Objektes. Mit "value" wird ein Initialwert vergeben und mit "enumerable" kann man angeben, ob diese Eigenschaft aufzählbar ist. Also man hat so etwas wie eine Datenkapselung. man kann Privatisieren von Eigenschaften vornehmen. Wenn man hier nicht "true" hat, - also hier haben wir überhaupt kein "false" - dann wird diese Eigenschaft auch nicht auftauchen. Beachten Sie, dass ich für das erste Objekt hier kein Prototyp angebe, für das zweite Objekt aber dieses Objekt, was ich vorher deklariert habe. Für ein drittes Objekt nehme ich den Prototyp "Image". Also diese Standardklasse, diesen Standard-Prototyp von JavaScript. Für den vierten "Date", ebenfalls ein Standardtyp von JavaScript. Und für den fünften ein DOM-Objekt. Die Syntax funktioniert für alle Wir schauen uns mal an, was Sie dann an der Ausgabe wiedererkennen können. Das hier ist die Ausgabe von meinem Beispiel. und ich muss natürlich noch zeigen, wie die entsteht. Mit einer kleinen Hilfsfunktion lasse ich mir den Typ von dem Parameter hier ausgeben, also "typeof" Parameter. Den Prototypen, es gibt eine Eigenschaft "prototype", die auf den Prototyp verweist. Und mit "constructor" verweise ich auf die Konstruktor-Methode. Danach sehen Sie noch alle Eigenschaften, die über "Key", "Value" in dem Objekt gespeichert sind. Beachten Sie, dass besonders hier die Eigenschaft "aufzaehlbar" eine Rolle spielen wird. Für das erste Objekt habe ich "typeof: object", "prototype: undefined". - Ich hatte ja "null" hier hingeschrieben - Und auch der Konstruktor ist nicht definiert, denn ich benutze ja die "create"-Methode und keine Konstruktor-Methode. Und das sind die Werte: "breite" und "form". Ziemlich eindeutig wiederzuerkennen. Das hier ist jetzt das zweite Objekt. Auch "typeof" liefert wieder "object", das ist der Typ "object", aber "prototype" ist "undefined". "constructor: undefined" ist wieder nicht überraschend, aber "protoype: undefined". Das ist etwas überraschend, weil wir hier ja als ersten Parameter dieses Objekt angegeben haben. Die Eigenschaften wiederum sind klar, wobei explizit hier nur "hoehe" und "material" deklariert sind, aber auch "breite" und "form" auftauchen. Hier ist die "breite" und hier die "form". Das sind ja Eigenschaften, die dieses Objekt von "obj1" geerbt hat. Obwohl hier bei der Eigenschaft "prototype" "undefined" auftaucht, hat das zweite Objekt explizit vom ersten Objekt die Eigenschaften übernommen, also diesen Prototyp zur Vererbung benutzt. In der Eigenschaft "prototype" kann auch etwas auftauchen. Das war hier das Objekt 3, was ich erzeuge und was auf dem Prototyp "Image" basiert. Und hier sehen Sie den Prototyp, der über die Eigenschaft "prototype" zur Verfügung gestellt wird. Allerdings sehen Sie hier auch, dass bei den Eigenschaften ausschließlich die neu hinzugefügte Eigenschaft auftaucht. Das heißt, die Eigenschaften von "Image" sind nicht aufzählbar. Denn ist Ihnen das aufgefallen? Bei "obj2" haben wir ja auch "material". Aber das taucht hier auch nicht auf. Klar, hier "enumerable" ist "false". Sie sehen hier bei diesem Standard-Prototyp "Image" dass dort etwas ähnliches gemacht wird. Selbstverständlich, Sie kennen die Eigenschaft von einem "Image"-Objekt, "source", "width", "height" oder solche Geschichten, aber die müssen eben nicht unbedingt aufzählbar sein. In Hinsicht auf eine Schleife zur Auswertung. Das hier ist jetzt "create" mit "Date" als Prototyp. Was immer hier in der Eigenschaft "protoype" auch drinsteht, ist im Grunde irrelevant für das, wie man es benutzt. Es ist einfach so, wie die Eigenschaft "prototype" belegt wird. Und der Konstruktor ist hier wie auch bei "Image" nativer Code. Selbstverständlich sind die Originalklassen, Prototypen von JavaScript in nativem Code verfasst. Das ist die Eigenschaft, die ich ergänzt habe und auch die ist aufzählbar gewesen. Und dann habe ich hier noch ein DOM-Objekt. Dessen Konstruktor-Funktion ist auch nativer Code, "prototype" ist "undefined" und das sind jetzt die Eigenschaften von "Navigator". sowie die Zusatzeigenschaft, die ich hier selbst ergänzt habe. Als Fazit sollte man festhalten, dass dieses "create" eine sehr flexible Möglichkeit ist, Objekte zu erzeugen und auch gewisse Regeln für die Eigenschaften festzulegen. Allerdings reagieren die Engines zum Teil noch sehr unterschiedlich und ältere Engines kommen gar nicht damit klar. Man sollte also diese Variante zur Objekterzeugung mit Vorsicht genießen.

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!