WEBVTT 00:00:01.342 --> 00:00:05.959 Da du nun etwas Javascript verstehst, möchte ich dir eine coole Art der Programmierung zeigen 00:00:05.959 --> 00:00:09.546 Etwas, das wir "objektorientierte Programmierung" nennen. 00:00:09.546 --> 00:00:12.570 Zuerst müssen wir aber den Vorteil davon verstehen 00:00:12.570 --> 00:00:17.668 Also habe ich ein Programm erstellt, das objektorientiert viel einfacher wird 00:00:17.668 --> 00:00:25.138 Es ist ein sehr cooles Programm. Oben hat es zwei Variablen, in denen einfache Objektliterale gespeichert sind. 00:00:25.138 --> 00:00:30.448 Das Objektliteral ist eine Art Objekt welches wir mit zwei geschweiften Klammern erstellen 00:00:30.448 --> 00:00:34.409 und dann schreiben wir alle Eigenschaftsnamen und Werte hinein. 00:00:34.409 --> 00:00:39.241 Wir haben also zwei dieser Objektliteralvariablen, und hier unten die Funktion drawWinston, 00:00:39.241 --> 00:00:41.129 die ein einziges Argument erwartet, 00:00:41.129 --> 00:00:47.882 und es dann zeichnet, sie zeichnet ein Bild basierend auf den x und y Eigenschaften des Objekts 00:00:47.882 --> 00:00:53.107 und dann eine Beschriftung basierend auf den Eigenschaften nickname und age des Objekts 00:00:53.107 --> 00:00:58.164 Und jetzt endlich hier unten, rufen wir drawWinston() für den Teenager und den Adult auf, 00:00:58.164 --> 00:01:01.012 und das ist es, was angezeigt wird. 00:01:01.012 --> 00:01:06.366 Ziemlich cool. Wenn wir uns jetzt diese Objektliterale ansehen, 00:01:06.366 --> 00:01:11.410 fällt uns auf, dass sie sich sehr ähnlich sehen. 00:01:11.410 --> 00:01:17.842 Beide haben die gleichen Eigenschaften und können von der gleichen Funktion drawWinston() verwendet werden. 00:01:17.842 --> 00:01:24.072 Wenn du dir das überlegst, beschreiben tatsächlich beide einen Typ von Winston, korrekt? 00:01:24.072 --> 00:01:28.796 Stell dir vor, dass es eine Art abstrakten Typ von Winston in der Welt gibt, 00:01:28.796 --> 00:01:36.460 jeder Winston hat die gleichen Eigenschaften wie einen Spitznamen, ein Alter, ein X und ein Y. 00:01:36.460 --> 00:01:42.162 Hier haben wir gerade zwei Instanzen eines Winstons erstellt um einen bestimmten Winston zu beschreiben 00:01:42.162 --> 00:01:48.465 . Dies ist also ein jugendlicher Winston und dies ist ein erwachsener Winston. 00:01:48.465 --> 00:01:54.762 Aber sie sind sich wirklich sehr ähnlich und es gibt eine Menge Dinge, die sie gemeinsam haben. 00:01:54.762 --> 00:02:01.295 Wenn man darüber nachdenkt, funktioniert die Welt auch so: Wir haben abstrakte Datentypen wie Menschen und Leute 00:02:01.295 --> 00:02:05.958 wir alle sind nur spezielle Instanzen dieser Typen mit unseren eigenen kleinen Eigenschaften. 00:02:05.958 --> 00:02:14.948 Jetzt können wir objektorientierte Techniken in Javascript verwenden, so dass diese Winston Variablen 00:02:14.948 --> 00:02:21.834 Instanzen eines Winston-Objekts sind und so wissen, dass sie diese Dinge gemeinsam haben. 00:02:21.834 --> 00:02:27.974 Dafür müssen wir als erstes diesen abstrakten Datentyp Winston beschreiben 00:02:27.974 --> 00:02:30.900 Und das tun wir, indem wir eine Variable erstellen 00:02:30.900 --> 00: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, 00:02:38.934 --> 00:02:42.196 und wir setzen sie gleich mit einer Funktion. 00:02:42.196 --> 00:02:47.030 Diese Funktion ist eine spezielle Funktion, die wir "Konstruktor" nennen 00:02:47.030 --> 00:02:52.042 sie wird jedes Mal aufgerufen, wenn wir eine neue Winston-Instanz erstellen. 00:02:52.042 --> 00: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. 00:02:57.860 --> 00:03:06.417 Das bedeutet, dass diese Funktion alle Argumente erhalten sollte, die sie braucht, um einen vollständigen Winston zu erstellen. 00:03:06.417 --> 00:03:11.324 In diesem Fall braucht sie also einen nickname, ein age, ein x und ein y. 00:03:11.324 --> 00:03:15.063 Sobald wir diese Argumente erhalten haben, müssen wir etwas mit ihnen machen, 00:03:15.063 --> 00:03:21.483 also müssen wir diese Informationen an das Winston-Objekt anhängen. 00:03:21.483 --> 00:03:28.672 Dazu verwenden wir ein neues spezielles Schlüsselwort, genannt "this", welches sich auf die aktuelle Objektinstanz bezieht. 00:03:28.672 --> 00:03:34.921 Wir sagen also this.nickname, was bedeutet, dass die Eigenschaft Nickname dieses Objekts gleich ist mit 00:03:34.921 --> 00:03:38.419 was auch immer dem Konstruktor übergeben wird, okay? 00:03:38.419 --> 00:03:45.728 Und this.age ist gleich dem Age, das übergeben wird, this.x ist gleich dem x und this.y 00:03:45.728 --> 00:03:48.385 ist gleich dem y, das übergeben wird. 00:03:48.385 --> 00:03:57.500 Jetzt haben wir einen abstrakten Datentyp Winston, der einen Konstruktor hat, mit dem wir einen neuen Winston erstellen können. 00:03:57.500 --> 00:04:00.327 Also versuchen wir nun, ihn zu benutzen! 00:04:00.327 --> 00:04:05.245 Wir werden wieder winstonTeen erstellen, aber dieses Mal sagen wir winstonTeen gleich, 00:04:05.245 --> 00:04:10.376 und anstelle der geschweiften Klammern sagen wir "equals new Winston". 00:04:10.376 --> 00:04:13.950 Wir sagen also: "Wir versuchen, eine neue Winson-Instanz zu erstellen". 00:04:13.950 --> 00:04:22.305 und dann geben wir die Informationen ein, die er braucht, also "Winsteen", 15, 20, 50, okay? 00:04:22.305 --> 00:04:27.502 Und nun können wir die alte Instanz löschen, weil wir sie nicht mehr brauchen. 00:04:27.502 --> 00:04:31.082 Alles klar? Jetzt haben wir einen neuen Winsteen erstellt. 00:04:31.082 --> 00:04:35.722 Und wir können sagen winstonAdult = new Winston() 00:04:35.722 --> 00:04:39.960 und natürlich ist sein Name "Mr. Winst-a-lot", ein süsser Name. 00:04:39.960 --> 00:04:47.410 Er ist 30, und ist bei 229 und 50. Alles klar? Gut, dann können wir dieses Objektliteral löschen. 00:04:47.410 --> 00:04:50.812 Und, tada! Unser Code funktioniert immer noch. 00:04:50.812 --> 00: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 00:04:58.094 --> 00:05:05.272 und wir können neue Winston Instanzen erstellen, die diese Eigenschaften haben, die einzigartig für sie sind 00:05:05.272 --> 00:05:08.799 Und wir speichern einfach diese Eigenschaften darin 00:05:08.799 --> 00:05:14.379 Und das Speichern ist wirklich wichtig. Du weisst, dass wir hier den Nickname und Age haben. 00:05:14.379 --> 00:05:20.212 Wenn wir versehentlich, this.age nicht hätten, würde jetzt "undefined" stehen. 00:05:20.212 --> 00:05:23.103 Das liegt daran, dass diese Funktion drawWinston() hier unten, 00:05:23.103 --> 00:05:28.162 erwartet, dass jedes Objekt, das ihr übergeben wird, eine Eigenschaft age hat. 00:05:28.162 --> 00:05:30.894 Und wenn wir nicht this.age gesagt haben, 00:05:30.894 --> 00:05:34.029 dann gibt es keine Eigenschaft age. Wir haben es an den Konstruktor übergeben 00:05:34.029 --> 00:05:39.363 aber dann nichts damit gemacht, wir müssen es tatsächlich mit dem Schlüsselwort "this" an das Objekt anhängen. 00:05:39.363 --> 00:05:41.444 Also fügen wir dies wieder hinzu 00:05:41.444 --> 00:05:46.361 Jetzt denkst du vielleicht, okay, du hast deinen Code zum Laufen gebracht und machst diese schicken Dinge, 00:05:46.361 --> 00:05:50.589 Aber, all das ergibt ja immer noch das gleiche, was wir vorher hatten. 00:05:50.589 --> 00:05:55.996 Aber das coole ist, dass nun alle unsere Winstons durch den gleichen Konstruktor gehen 00:05:55.996 --> 00:06:00.830 Wenn wir also wollen, können wir einige Dinge für alle Winstons auf einmal ändern 00:06:00.830 --> 00:06:06.059 einfach hier drin. Also vielleicht das Alter, wir wollen eigentlich "Years old" sagen. 00:06:06.059 --> 00:06:12.804 Wir können das einfach hier einfügen, und jetzt sagen alle unsere Winstons "15 Years old", "30 Years old", cool! 00:06:12.804 --> 00:06:17.281 Sie haben also Dinge die einzigartig an ihnen sind, aber dann haben Gemeinsamkeiten 00:06:17.281 --> 00:06:20.968 Und das ist eine wirklich coole Sache an objektorientierter Programmierung, diese Idee, 00:06:20.968 --> 00:06:26.632 dass es diese Art von Objekten in der Welt gibt, und dass man Instanzen dieser Objekte erstellen kann 00:06:26.632 --> 00:06:29.925 und es gibt einige Dinge die ähnlich sind, wie zum Beispiel, dass sie alle die gleichen Eigenschaften haben, 00:06:29.925 --> 00:06:35.528 Dann gibt es Dinge, die sich unterscheiden, wie z.B. dass diese Eigenschaft einen anderen Wert hat als diese andere Eigenschaft 00:06:35.528 --> 00:06:40.741 Aber dann, können wir das gleiche Verhalten mit ihnen machen, wie die gleichen Funktionen aufrufen 00:06:40.741 --> 00:06:45.829 und diese auf ähnliche Weise verwenden. Das sind also einige der coolen Sachen der objektorientierte Programmierung 00:06:45.829 --> 00:06:48.690 aber wie du sehen wirst, gibt es noch eine Menge mehr. 00:06:48.690 --> 00:06:51.000 Also, bleib dran!