OOP mit JavaScript Grundkurs

Objekte erzeugen – mit Konstruktoren oder Literalen

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
In der Regel werden Objekte in der OOP mittels eines Konstruktors erzeugt – so auch in JavaScript. Doch hier gibt es ebenso eine deklarative Herangehensweise mittels Objektliteralen. Dabei kommt es darauf an, wie Arrays versus Objekte in JavaScript zu verstehen sind.
12:03

Transkript

In der objektorientierten Programmierung werden Objekte typischerweise über sogenannte Konstruktoren erzeugt. Das kann man in JavaScript auch machen. Es gibt aber auch weitere Möglichkeiten, die wir uns in diesem Video ansehen wollen. Ich habe hier ein kleines Beispiel vorbereitet mit einer einfachen Website, in der ich eine JavaScript Datei referenziere. Beachten Sie, dass sie im Body referenziert wird. Ich möchte mit document.write in die Webseite hineinschreiben, damit wir etwas sehen können. Das hier ist die externe JavaScript Datei, die ich hier referenziere. Nun ist ein sogenannter Konstruktor eine Möglichkeit, aus einer Klasse ein Objekt zu erzeugen oder aus einem Objekttyp oder einem Prototyp. Das möchte ich hier nicht differenzieren. Allgemein kennen Sie sicherlich die Möglichkeit, dass man... eine Variable deklarieren kann in JavaScript und dann sowas schreibt. Zum Beipspiel New Date. Dieses New Date ist jetzt ja Aufruf des Konstruktors. Auf diese Art und Weise habe ich ein Objekt erzeugt in JavaScript mittels einer Standardklasse, einem Standardtyp, den es in JavaScript gibt und den kann ich jetzt natürlich hier auch nutzen und mit document.write beispielsweise in die Webseite schreiben. Das können wir uns direkt mal anschauen, was da rauskommt. Da sehen Sie dann sowas wie hier. Also diese Vorgehensweise, mittels eines Konstruktors Objekte zu erzeugen, das ist typisch in JavaScript, in vielen anderen Programmiersprachen aber auch. Die Besonderheit in JavaScript ist, dass es auch andere Wege gibt, wie man Objekte erzeugen kann, nämlich literal. Es gibt sogenannte Objektliterale. Es gibt eine Notation, die nennt sich JSON. JSON steht für JavaScript Objekt Notation. Und das deutet bereits hin, dass hier eine Objekt-Notation aufgebaut wird. Die meisten werden vermutlich diese Syntax hier kennen. Man schreibt geschweifte Klammer auf, geschweifte Klammer zu und im Inneren gibt man dann Eigenschaften an samt ihrer Werte als eine Liste. Das kann man als eine sogenannte Hash-Liste verstehen. Das heißt immer Key Value System. Wert, Eigenschaft. Bereits die Notation von diesem Literal hier, diesem JSON Literal, das genügt, dass wir hier tatsächlich ein Objekt vorliegen haben. Das können wir uns mal beweisen, tatsächlich wieder mit einem document.write. ich... mache mal einen Zeilenumbruch oder von mir aus auch eine Trennlinie, dass man es besser sieht und hänge hier mit typeof obj einfach den Typ dran, der hier erzeugt wurde. Das heißt, die Variable ist dann von einem ganz bestimmten Typen. Das wird object sein. Das werden wir jetzt sehen, wenn wir diese Seite wieder in einem Browser laden. Hier sehen Sie die Ausgabe. Man nennt dieses hier eine literale Erzeugung. Und selbstverständlich wird man hier normalerweise irgendwelche Key Values angeben. Also was weiß ich... "Name":"Meier" oder so. Und durch eine Kommata getrennte Liste kann man mehere Werte angeben und dann hat das Objekt genau diese Eigenschaften. Das ist wie gesagt eine literale Erzeugung. JavaScript hat noch eine Besonderheit, denn es gibt auch Arrays in JavaScript. Das ist soweit nicht überraschend. Selbstverständlich kennen Sie Arrays, aber die Besonderheit ist, dass jedes Array ein Objekt ist. Jetzt können Sie auch sagen, wenn Sie beispielsweise aus einer Sprache wie Java oder C# kommen, auch keine Besonderheit. Dort ist auch ein Array ein Objekt. Ja, aber die Besonderheit hier in JavaScript ist, jedes Objekt ist eigentlich auch ein Array. Das heißt, es ist eine bidirektionale Beziehung. Das bedeutet folgendes: Wenn ich hier ein... Arrray erzeuge, dann kann ich das beispielsweise so machen mit diesen eckigen Klammern. Und auch jetzt lassen wir uns mal anschauen, was ist das denn für ein Typ? Natürlich ist das ein Array. So erzeugt man unter anderem Arrays. Es gibt noch andere Notationen, aber das ist eine Möglichkeit, so einen Array zu erzeugen. Aber Sie sehen, a ist vom Typ object also auch ein Objekt. Gibt es einen Unterschied zwischen Objekten und Arrays in JavaScript? Die Literatur ist nicht ganz eindeutig. Manche differenzieren da so ein bisschen. Ich neige dazu, zu sagen, nein, es gibt überhaupt keinen Unterschied, denn jedes Objekt ist ein Array und jedes Array ist ein Objekt. Jetzt kann man ja so was machen. Das heißt, Sie geben in den eckigen Klammern so etwas wie eine Reihenfolge von Werten an, die dann automatisch durchindiziert werden. Das heißt, mit a(0) kommt dann die 1 a(1) dann die 2, a(2) dann die 3 und eben auch die 4. Soweit deutet einiges drauf hin, dass es Arrays mit einem numerischen Index in JavaScript gibt. Die meisten werden das auch so kennen. Aber was passiert beispielsweise jetzt wenn wir so etwas machen? Wie groß ist das Array? Es gibt eine Eigenschaft, die ganz spannend ist. Die heißt Length. Das heißt, ich kann hier mal Folgendes machen. a.length, ich nutze die Punkt-Notation, um dem Objekt eine Botschaft zu schicken und den Wert der Eigenschaften Length abzufragen. So greift man ja typischerweise auf Objekte und deren Eigenschaften und Methoden zu über Punkt-Notation in JavaScript. Wir schauen uns mal das Ergebnis an. Was wird es sein? Richtig, 11. Warum? Naja, wir haben null indizierte Arrays, also ist 11 doch sehr naheliegend und gleichzeitig extrem irreführend. Denn jetzt kann man die Frage stellen, wie groß ist das Array a? Und die Antwort wird in vielen Fällen sein, naja, das wird 11 sein. 11 Elemente. Und das ist falsch. Nein, das Array besteht aus 5 Elementen, keine 11. Auch das kann man relativ schnell sich klarmachen indem man hier den Wert beispielsweise von a(6) zum Beipsiel mal ausibt. Was wird es sein? Nun, a(0), a(1), a (2), a(3) und a(10) haben wir ja mit Werten belegt, aber (6) eben nicht. a(6) ist undefined. Damit kann man leben. Undefined kennt man ja so. Das kommt in JavaScript mehr oder weniger so nicht vorhersehbar immer mal wieder vor. Auch das ist jetzt extrem irrefürend aus meiner Sicht. Es ist eine Folge der losen Typisierung in JavaScript, dass dieses undefined auftauchen kann, obwohl es dieses Element überhaupt nicht gibt. Und wenn Sie jetzt eine Schleife laufen lassen über dieses Array a eine var i Schleife. for (var i in a) und lassen eine c Variable mitlaufen, dann werden Sie sehen, dass die Anzahl der Elemente eben doch nur 5 ist. Das würde so aussehen. for (var i in a) und dann nehmen wir noch eine c Variable. var c für counter c haben wir schon counter = 0 In jedem Schleifendurchlauf mache ich einen counter++ und hier gebe ich dann mal das gesamte Array aus, das kann man so machen document.write und dann lassen wir uns hier, was weiß ich, mit br einen Zeilenumbruch generieren und machen dann a[i] Schauen wir uns auch das an. Wobei wir vielleicht am Ende noch mal uns den Wert vom Counter schnell ansehen sollten. Und das ist das Ergebnis. Beachten Sie, hier haben wir die 1,2,3,4,5 Das hier ist ja mein a(10) und fünf und die Anzahl der Elemente. Also das hat überhaupt nichts mit diesen Length zu tun. Length ist nur dann sinnvoll, wenn wir ein automatisch indiziertes Array haben oder rein zufällig eine Indizierung haben von 0,1,2,3,4,5,6,7,8,9,10 also mit numerischen Indizes ohne Lücken. Dann gibt Length tatsächlich die Anzahl der Elemente vor, ansonsten ist das der höchste numerische Index in einem Array. Und jetzt komme ich zu einer provokanten Aussage. Ich behaupte, es gibt in JavaScript überhaupt keine numerischen Indizes, denn immer wenn wir a(10) haben, haben wir eigentlich da stehen a["10"] als String. Und es findet eine Typkonvertierung statt implizit. Wenn wir a(10) hinschreiben oder a(0) haben oder irgendwelche Zahlen, es gibt nur diese Hash-Listen, diese assoziierten Arrays, über die man auf ein Objekt eigentlich zugreift. Denn, um hier oben noch mal etwas zu zeigen, Sie können auf so ein Objekt, das Sie mit der JSON-Notation beispielsweise hinschreiben auf verschiedene Art und Weise zugreifen. Sie können obj.name zum Beispiel machen, also die klassische Dot-Notation. Sie können aber auch die Array-Notation machen. Das können wir durchaus mal beides hier notieren, dann sehen Sie das auch als Beweis. Das ist äquivalent. Warum ist das äquivalent? Weil es keinen Unterschied zwischen Arrays und Objekten gibt. Wir haben hier den Zugriff obj.name und hier haben wir obj[name]. Beides liefert den gleichen Wert in dem Fall natürlich. Es is also elementar zu verstehen, dass Arrays als Objekte zu sehen sind und Objekte als assoziierte Arrays und dass numerische Indizes im Grunde nur gewandelte assoziierte Werte sind, die "zufälligerweise" als Content nur eine Zeile enthalten haben. Die Schlüssel dieser Werte hier, die werden übrigens sehr oft auch Slots genannt. Der Hintregrund dieser ganzen Dinge, die Sie in dem Video zu Objekten vs. Arrays kennenlernt haben ist, dass wir bei JavaScript eine sogenannte prototypbasierte Programmierung vornehmen. Das ist eine prototypbasierende Sprache und da werden Objekte als assoziierte Arrays verstanden.

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!