Object Types (Video Version)

Da du nun etwas Javascript verstehst, möchte ich dir eine coole Art der Programmierung zeigen

Etwas, das wir "objektorientierte Programmierung" nennen.

Zuerst müssen wir aber den Vorteil davon verstehen

Also habe ich ein Programm erstellt, das objektorientiert viel einfacher wird

Es ist ein sehr cooles Programm. Oben hat es zwei Variablen, in denen einfache Objektliterale gespeichert sind.

Das Objektliteral ist eine Art Objekt welches wir mit zwei geschweiften Klammern erstellen

und dann schreiben wir alle Eigenschaftsnamen und Werte hinein.

Wir haben also zwei dieser Objektliteralvariablen, und hier unten die Funktion drawWinston,

die ein einziges Argument erwartet,

und es dann zeichnet, sie zeichnet ein Bild basierend auf den x und y Eigenschaften des Objekts

und dann eine Beschriftung basierend auf den Eigenschaften nickname und age des Objekts

Und jetzt endlich hier unten, rufen wir drawWinston() für den Teenager und den Adult auf,

und das ist es, was angezeigt wird.

Ziemlich cool. Wenn wir uns jetzt diese Objektliterale ansehen,

fällt uns auf, dass sie sich sehr ähnlich sehen.

Beide haben die gleichen Eigenschaften und können von der gleichen Funktion drawWinston() verwendet werden.

Wenn du dir das überlegst, beschreiben tatsächlich beide einen Typ von Winston, korrekt?

Stell dir vor, dass es eine Art abstrakten Typ von Winston in der Welt gibt,

jeder Winston hat die gleichen Eigenschaften wie einen Spitznamen, ein Alter, ein X und ein Y.

Hier haben wir gerade zwei Instanzen eines Winstons erstellt um einen bestimmten Winston zu beschreiben

. Dies ist also ein jugendlicher Winston und dies ist ein erwachsener Winston.

Aber sie sind sich wirklich sehr ähnlich und es gibt eine Menge Dinge, die sie gemeinsam haben.

Wenn man darüber nachdenkt, funktioniert die Welt auch so: Wir haben abstrakte Datentypen wie Menschen und Leute

wir alle sind nur spezielle Instanzen dieser Typen mit unseren eigenen kleinen Eigenschaften.

Jetzt können wir objektorientierte Techniken in Javascript verwenden, so dass diese Winston Variablen

Instanzen eines Winston-Objekts sind und so wissen, dass sie diese Dinge gemeinsam haben.

Dafür müssen wir als erstes diesen abstrakten Datentyp Winston beschreiben

Und das tun wir, indem wir eine Variable erstellen

Du willst den Datentyp in einer Variablen speichern. Also var Winston, und wir schreiben ein grosses W, weil wir unsere Objekttypen immer mit einem Grossbuchstaben beginnen,

und wir setzen sie gleich mit einer Funktion.

Diese Funktion ist eine spezielle Funktion, die wir "Konstruktor" nennen

sie wird jedes Mal aufgerufen, wenn wir eine neue Winston-Instanz erstellen.

Wenn wir einen Teenage-Winston erstellen wollen, rufen wir diese Funktion auf, auch für einen Adult-Winston, rufen diese Funktion auf.

Das bedeutet, dass diese Funktion alle Argumente erhalten sollte, die sie braucht, um einen vollständigen Winston zu erstellen.

In diesem Fall braucht sie also einen nickname, ein age, ein x und ein y.

Sobald wir diese Argumente erhalten haben, müssen wir etwas mit ihnen machen,

also müssen wir diese Informationen an das Winston-Objekt anhängen.

Dazu verwenden wir ein neues spezielles Schlüsselwort, genannt "this", welches sich auf die aktuelle Objektinstanz bezieht.

Wir sagen also this.nickname, was bedeutet, dass die Eigenschaft Nickname dieses Objekts gleich ist mit

was auch immer dem Konstruktor übergeben wird, okay?

Und this.age ist gleich dem Age, das übergeben wird, this.x ist gleich dem x und this.y

ist gleich dem y, das übergeben wird.

Jetzt haben wir einen abstrakten Datentyp Winston, der einen Konstruktor hat, mit dem wir einen neuen Winston erstellen können.

Also versuchen wir nun, ihn zu benutzen!

Wir werden wieder winstonTeen erstellen, aber dieses Mal sagen wir winstonTeen gleich,

und anstelle der geschweiften Klammern sagen wir "equals new Winston".

Wir sagen also: "Wir versuchen, eine neue Winson-Instanz zu erstellen".

und dann geben wir die Informationen ein, die er braucht, also "Winsteen", 15, 20, 50, okay?

Und nun können wir die alte Instanz löschen, weil wir sie nicht mehr brauchen.

Alles klar? Jetzt haben wir einen neuen Winsteen erstellt.

Und wir können sagen winstonAdult = new Winston()

und natürlich ist sein Name "Mr. Winst-a-lot", ein süsser Name.

Er ist 30, und ist bei 229 und 50. Alles klar? Gut, dann können wir dieses Objektliteral löschen.

Und, tada! Unser Code funktioniert immer noch.

Was wir hier also gemacht haben, ist, dass wir gesagt haben, okay, es gibt diesen abstrakten Typ von Daten, nämlich diesen Winston

und wir können neue Winston Instanzen erstellen, die diese Eigenschaften haben, die einzigartig für sie sind

Und wir speichern einfach diese Eigenschaften darin

Und das Speichern ist wirklich wichtig. Du weisst, dass wir hier den Nickname und Age haben.

Wenn wir versehentlich, this.age nicht hätten, würde jetzt "undefined" stehen.

Das liegt daran, dass diese Funktion drawWinston() hier unten,

erwartet, dass jedes Objekt, das ihr übergeben wird, eine Eigenschaft age hat.

Und wenn wir nicht this.age gesagt haben,

dann gibt es keine Eigenschaft age. Wir haben es an den Konstruktor übergeben

aber dann nichts damit gemacht, wir müssen es tatsächlich mit dem Schlüsselwort "this" an das Objekt anhängen.

Also fügen wir dies wieder hinzu

Jetzt denkst du vielleicht, okay, du hast deinen Code zum Laufen gebracht und machst diese schicken Dinge,

Aber, all das ergibt ja immer noch das gleiche, was wir vorher hatten.

Aber das coole ist, dass nun alle unsere Winstons durch den gleichen Konstruktor gehen

Wenn wir also wollen, können wir einige Dinge für alle Winstons auf einmal ändern

einfach hier drin. Also vielleicht das Alter, wir wollen eigentlich "Years old" sagen.

Wir können das einfach hier einfügen, und jetzt sagen alle unsere Winstons "15 Years old", "30 Years old", cool!

Sie haben also Dinge die einzigartig an ihnen sind, aber dann haben Gemeinsamkeiten

Und das ist eine wirklich coole Sache an objektorientierter Programmierung, diese Idee,

dass es diese Art von Objekten in der Welt gibt, und dass man Instanzen dieser Objekte erstellen kann

und es gibt einige Dinge die ähnlich sind, wie zum Beispiel, dass sie alle die gleichen Eigenschaften haben,

Dann gibt es Dinge, die sich unterscheiden, wie z.B. dass diese Eigenschaft einen anderen Wert hat als diese andere Eigenschaft

Aber dann, können wir das gleiche Verhalten mit ihnen machen, wie die gleichen Funktionen aufrufen

und diese auf ähnliche Weise verwenden. Das sind also einige der coolen Sachen der objektorientierte Programmierung

aber wie du sehen wirst, gibt es noch eine Menge mehr.

Also, bleib dran!