0:00:01.342,0:00:05.959
Da du nun etwas Javascript verstehst, möchte ich dir eine coole Art der Programmierung zeigen

0:00:05.959,0:00:09.546
Etwas, das wir "objektorientierte Programmierung" nennen.

0:00:09.546,0:00:12.570
Zuerst müssen wir aber den Vorteil davon verstehen

0:00:12.570,0:00:17.668
Also habe ich ein Programm erstellt, das objektorientiert viel einfacher wird

0:00:17.668,0:00:25.138
Es ist ein sehr cooles Programm. Oben hat es zwei Variablen, in denen einfache Objektliterale gespeichert sind.

0:00:25.138,0:00:30.448
Das Objektliteral ist eine Art Objekt welches wir mit zwei geschweiften Klammern erstellen

0:00:30.448,0:00:34.409
und dann schreiben wir alle Eigenschaftsnamen und Werte hinein.

0:00:34.409,0:00:39.241
Wir haben also zwei dieser Objektliteralvariablen, und hier unten die Funktion drawWinston,

0:00:39.241,0:00:41.129
die ein einziges Argument erwartet,

0:00:41.129,0:00:47.882
und es dann zeichnet, sie zeichnet ein Bild basierend auf den x und y Eigenschaften des Objekts

0:00:47.882,0:00:53.107
und dann eine Beschriftung basierend auf den Eigenschaften nickname und age des Objekts

0:00:53.107,0:00:58.164
Und jetzt endlich hier unten, rufen wir drawWinston() für den Teenager und den Adult auf,

0:00:58.164,0:01:01.012
und das ist es, was angezeigt wird.

0:01:01.012,0:01:06.366
Ziemlich cool. Wenn wir uns jetzt diese Objektliterale ansehen,

0:01:06.366,0:01:11.410
fällt uns auf, dass sie sich sehr ähnlich sehen.

0:01:11.410,0:01:17.842
Beide haben die gleichen Eigenschaften und können von der gleichen Funktion drawWinston() verwendet werden.

0:01:17.842,0:01:24.072
Wenn du dir das überlegst, beschreiben tatsächlich beide einen Typ von Winston, korrekt?

0:01:24.072,0:01:28.796
Stell dir vor, dass es eine Art abstrakten Typ von Winston in der Welt gibt,

0:01:28.796,0:01:36.460
jeder Winston hat die gleichen Eigenschaften wie einen Spitznamen, ein Alter, ein X und ein Y.

0:01:36.460,0:01:42.162
Hier haben wir gerade zwei Instanzen eines Winstons erstellt um einen bestimmten Winston zu beschreiben

0:01:42.162,0:01:48.465
. Dies ist also ein jugendlicher Winston und dies ist ein erwachsener Winston.

0:01:48.465,0:01:54.762
Aber sie sind sich wirklich sehr ähnlich und es gibt eine Menge Dinge, die sie gemeinsam haben.

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

0:02:01.295,0:02:05.958
wir alle sind nur spezielle Instanzen dieser Typen mit unseren eigenen kleinen Eigenschaften.

0:02:05.958,0:02:14.948
Jetzt können wir objektorientierte Techniken in Javascript verwenden, so dass diese Winston Variablen

0:02:14.948,0:02:21.834
Instanzen eines Winston-Objekts sind und so wissen, dass sie diese Dinge gemeinsam haben.

0:02:21.834,0:02:27.974
Dafür müssen wir als erstes diesen abstrakten Datentyp Winston beschreiben

0:02:27.974,0:02:30.900
Und das tun wir, indem wir eine Variable erstellen

0:02:30.900,0:02:38.934
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,

0:02:38.934,0:02:42.196
und wir setzen sie gleich mit einer Funktion.

0:02:42.196,0:02:47.030
Diese Funktion ist eine spezielle Funktion, die wir "Konstruktor" nennen

0:02:47.030,0:02:52.042
sie wird jedes Mal aufgerufen, wenn wir eine neue Winston-Instanz erstellen.

0:02:52.042,0:02:57.860
Wenn wir einen Teenage-Winston erstellen wollen, rufen wir diese Funktion auf, auch für einen Adult-Winston, rufen diese Funktion auf.

0:02:57.860,0:03:06.417
Das bedeutet, dass diese Funktion alle Argumente erhalten sollte, die sie braucht, um einen vollständigen Winston zu erstellen.

0:03:06.417,0:03:11.324
In diesem Fall braucht sie also einen nickname, ein age, ein x und ein y.

0:03:11.324,0:03:15.063
Sobald wir diese Argumente erhalten haben, müssen wir etwas mit ihnen machen,

0:03:15.063,0:03:21.483
also müssen wir diese Informationen an das Winston-Objekt anhängen.

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

0:03:28.672,0:03:34.921
Wir sagen also this.nickname, was bedeutet, dass die Eigenschaft Nickname dieses Objekts gleich ist mit

0:03:34.921,0:03:38.419
was auch immer dem Konstruktor übergeben wird, okay?

0:03:38.419,0:03:45.728
Und this.age ist gleich dem Age, das übergeben wird, this.x ist gleich dem x und this.y

0:03:45.728,0:03:48.385
ist gleich dem y, das übergeben wird.

0:03:48.385,0:03:57.500
Jetzt haben wir einen abstrakten Datentyp Winston, der einen Konstruktor hat, mit dem wir einen neuen Winston erstellen können.

0:03:57.500,0:04:00.327
Also versuchen wir nun, ihn zu benutzen!

0:04:00.327,0:04:05.245
Wir werden wieder winstonTeen erstellen, aber dieses Mal sagen wir winstonTeen gleich,

0:04:05.245,0:04:10.376
und anstelle der geschweiften Klammern sagen wir "equals new Winston".

0:04:10.376,0:04:13.950
Wir sagen also: "Wir versuchen, eine neue Winson-Instanz zu erstellen".

0:04:13.950,0:04:22.305
und dann geben wir die Informationen ein, die er braucht, also "Winsteen", 15, 20, 50, okay?

0:04:22.305,0:04:27.502
Und nun können wir die alte Instanz löschen, weil wir sie nicht mehr brauchen.

0:04:27.502,0:04:31.082
Alles klar? Jetzt haben wir einen neuen Winsteen erstellt.

0:04:31.082,0:04:35.722
Und wir können sagen winstonAdult = new Winston()

0:04:35.722,0:04:39.960
und natürlich ist sein Name "Mr. Winst-a-lot", ein süsser Name.

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

0:04:47.410,0:04:50.812
Und, tada! Unser Code funktioniert immer noch.

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

0:04:58.094,0:05:05.272
und wir können neue Winston Instanzen erstellen, die diese Eigenschaften haben, die einzigartig für sie sind

0:05:05.272,0:05:08.799
Und wir speichern einfach diese Eigenschaften darin

0:05:08.799,0:05:14.379
Und das Speichern ist wirklich wichtig. Du weisst, dass wir hier den Nickname und Age haben.

0:05:14.379,0:05:20.212
Wenn wir versehentlich, this.age nicht hätten, würde jetzt "undefined" stehen.

0:05:20.212,0:05:23.103
Das liegt daran, dass diese Funktion drawWinston() hier unten,

0:05:23.103,0:05:28.162
erwartet, dass jedes Objekt, das ihr übergeben wird, eine Eigenschaft age hat.

0:05:28.162,0:05:30.894
Und wenn wir nicht this.age gesagt haben,

0:05:30.894,0:05:34.029
dann gibt es keine Eigenschaft age. Wir haben es an den Konstruktor übergeben

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

0:05:39.363,0:05:41.444
Also fügen wir dies wieder hinzu

0:05:41.444,0:05:46.361
Jetzt denkst du vielleicht, okay, du hast deinen Code zum Laufen gebracht und machst diese schicken Dinge,

0:05:46.361,0:05:50.589
Aber, all das ergibt ja immer noch das gleiche, was wir vorher hatten.

0:05:50.589,0:05:55.996
Aber das coole ist, dass nun alle unsere Winstons durch den gleichen Konstruktor gehen

0:05:55.996,0:06:00.830
Wenn wir also wollen, können wir einige Dinge für alle Winstons auf einmal ändern

0:06:00.830,0:06:06.059
einfach hier drin. Also vielleicht das Alter, wir wollen eigentlich "Years old" sagen.

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

0:06:12.804,0:06:17.281
Sie haben also Dinge die einzigartig an ihnen sind, aber dann haben Gemeinsamkeiten

0:06:17.281,0:06:20.968
Und das ist eine wirklich coole Sache an objektorientierter Programmierung, diese Idee,

0:06:20.968,0:06:26.632
dass es diese Art von Objekten in der Welt gibt, und dass man Instanzen dieser Objekte erstellen kann

0:06:26.632,0:06:29.925
und es gibt einige Dinge die ähnlich sind, wie zum Beispiel, dass sie alle die gleichen Eigenschaften haben,

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

0:06:35.528,0:06:40.741
Aber dann, können wir das gleiche Verhalten mit ihnen machen, wie die gleichen Funktionen aufrufen

0:06:40.741,0:06:45.829
und diese auf ähnliche Weise verwenden. Das sind also einige der coolen Sachen der objektorientierte Programmierung

0:06:45.829,0:06:48.690
aber wie du sehen wirst, gibt es noch eine Menge mehr.

0:06:48.690,0:06:51.000
Also, bleib dran![br]