Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

OOP mit JavaScript Grundkurs

Ein Objekt erweitern und reduzieren

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In JavaScript können einem Objekt zur Laufzeit Eigenschaften hinzugefügt, geändert oder entfernt werden, sofern Objekte nicht gegen Veränderung geschützt sind. Das ist deshalb so einfach, weil Objekte im Grunde nur eine Hash-Liste darstellen, die durch neue Wertzuweisungen beliebig verändert, erweitert oder reduziert werden kann. Das Löschen nicht mehr benötigter Objekte wird in der Regel von einem automatischen Prozess, der Garbage Collection, erledigt.
07:13

Transkript

Objekte in JavaScript sind einfach Hashlisten und durch die lose Typisierung, also auch den Prototyp-Aufbau, kann man Objekte in JavaScript extrem leicht erweitern. Und in diesem Video wollen wir uns das ansehen. Normalerweise hat man die Grundstruktur eines Objektes nach dem Erzeugen der Konstruktor-Methode zur Verfügung und das habe ich hier mal in einem Beispiel demonstriert. Das heißt, ich erzeuge aus einer Standardklasse, aus einem Standard-Prototyp von JavaScript, nämlich Image, ein neues Bildobjekt. Und mit einer einfachen "for"-Schleife, einer "for each", "for i in", gebe ich sämtliche Hash-Werte, dieses Objektes aus. Das heißt immer "Key:", "Value:". Schauen wir uns mal an, was dieses Objekt hier für Eigenschaften hat. Das hier ist diese Liste. Das heißt, die einzelnen Schlüssel und die zugehörigen Werte. Das sind Eigenschaften. Beachten Sie, dass auch die Methoden, die an einem Objekt hängen, über Eigenschaften repräsentiert werden. Das hier ist eine anonyme Funktion, beziehungsweise eine Callback-Funktion. Und die liefert ja einen Wert, einen Zeiger, eine Referenz, auf die Funktionsimplementierung. Von daher ist "click" auch eine Eigenschaft oder "focus". Das ist typisch für JavaScript. sämtliche Eigenschaften aber auch Methoden werden eben über reine Key-Value-Systeme repräsentiert. und das ist dann so eine Hashliste die jedes Objekt auszeichnet. Und Sie sehen, hier gibt es eine ganze Menge von diesen Eigenschaften an diesem spezifischen Objekt 1 vom Typ "image". Ganz interessant ist übrigens, dass sich nicht jedes Objekt so mit dieser "for each"-Schleife ausgeben lässt. Wenn Sie beispielsweise hier ein "new Date" machen, und geben nochmal von mir aus den Wert aus, - das können wir hier ganz einfach machen, da wird implizit so eine "toString"-Methode aufgerufen - dann werden Sie sehen, dass die Eigenschaften, die hier zu diesem "Date"-Objekt gehören, nicht unbedingt im Browser angezeigt werden mit dieser "for i in". Ich mache mal hier ein Reload und Sie sehen, das Datum wird einfach ausgegeben, aber die "for i in" liefert nichts. Das bedeutet in keiner Weise, dass diese "for i in"-Schleife nicht funktioniert und auch nicht, dass hier irgendwas falsch ist. Das ist einfach so, dass dieses Objekt sozusagen nichts über sich verrät. Umkehrschluss: Man kann nicht daraus schließen, wenn "for i in"-Objekt keine Ausgabe liefert, oder keine Werte, dass dieses Objekt keine Eigenschaften und Methoden hat. Sie wissen ja, dass ein Datumsobjekt mit diesen ganzen Getter-Methoden, also "getMinutes", "getYears", die einzelnen Information auch gezielt bereitstellen kann. Nun geht es in diesem Video darum, wie kann man ein bestehendes Objekt erweitern? Nun, ich werde mal hier so ein "document.write" notieren und eine Trennlinie ausgeben. Das heißt, wir werden bei einer folgenden Ausgabe erkennen, wo die bisherige war und die neue. Und danach lasse ich wieder diese Schleife laufen. Aber vorher mache ich was. "d.copyright". ist gleich irgendein Wert. Das heißt, ich nehme einen Schlüssel, den es bisher noch nicht gibt. Sie können nachschauen. Wir können das überprüfen. Es gibt hier bei einem "Image"-Objekt kein Copyright. Das heißt, ich weise hier einen Wert zu. So eine Eigenschaft, die nicht vorhanden ist. Und es passiert nichts Weiteres, als dass diese Liste, diese Hashliste erweitert wird. Wir schauen uns das jetzt mal wieder an. Das ist die Ausgabe. Zuerst das ganze Zeug vor der Erweiterung, und irgendwann kommt eine Trennlinie und hier kommt die neue Ausgabe. Und Sie sehen gleich als Erstes, also oben in der Hashliste, - zumindest von der Ausgabe her - taucht diese Eigenschaft "copyright" mit einem Wert auf. Ich scrolle nochmal ganz nach oben und hier ist er nicht da. Das bedeutet also, jedes Objekt kann, auch nachdem es bereits erzeugt wurde, nachträglich erweitert werden. Das ist eben eine Folge der losen Typisierung, dieser Hash-Struktur von JavaScript. Das einfach nur Key-Values auftauchen, eine Liste, die beliebig erweitert, geändert werden kann. Geändert heißt, Sie können auch bestehende Eigenschaften verändern. Das heißt, man könnte hier nachträglich so etwas vornehmen. Das heißt, zu diesem Zeitpunkt, wo die dritte Schleife ausgeführt wird, hat diese Eigenschaft "copyright" einen anderen Wert. Das finden wir jetzt am schnellsten, indem ich hier nach "Mir" suche. Sie sehen hier "copyright - Value: Mir" und hier "Mir nicht". Und man kann Eigenschaften auch wieder löschen, was ich hier mal bereits vorbereitet habe. Das heißt, statt dieser Zeile "d.copyright= Mir nicht" die ich jetzt auskommentiert habe, habe ich hier einen "delete" vorgenommen. Wenn das wirklich wirkt, wird bei der zweiten Ausgabe die Eigenschaft "copyright" nicht mehr auftauchen und das können wir natürlich auch suchen ob es nur einmal vorkommt. Also es kommt ganz offensichtlich noch einmal vor, aber wenn ich jetzt Return drücke und den nächsten haben möchte: Es gibt ihn nur ein einziges Mal, diesen Wert "copyright". Sie sehen hier, der Schieber von der Bildlaufleiste hat sich ja nicht verändert, obwohl ich hier auf "Weiter" klicke. Zusammenfassend bedeutet das: Sie können Objekte, sofern sie nicht durch irgendeine besondere Syntax geschützt sind beliebig erweitern, indem Sie einfach einen Objektnamen und eine neue Eigenschaft hinschreiben und dann einen Wert zuweisen. Sie können jederzeit eine Eigenschaft löschen, sofern diese nicht auch geschützt ist, über die "delete"-Anweisung, und Sie können eine bestehende Eigenschaft jederzeit verändern. Mit "for i in" können Sie relativ zuverlässig die Objekteigenschaften, die Key-Value-Listen ausgeben es sei denn das Objekt selbst schützt sich gegen diese Ausgabe, was man hier in diesem Fall zumindest mit "Date" gemacht hat, wobei das durchaus auch vom Browser abhängen kann. Das ist nicht hundertprozentig eindeutig. Aber das ist ja auch nur eine Möglichkeit, um sich mal schnell diese Eigenschaften eines Objekts anzusehen.

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!