[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.34,0:00:05.96,Default,,0000,0000,0000,,Da du nun etwas Javascript verstehst, möchte ich dir eine coole Art der Programmierung zeigen
Dialogue: 0,0:00:05.96,0:00:09.55,Default,,0000,0000,0000,,Etwas, das wir "objektorientierte Programmierung" nennen.
Dialogue: 0,0:00:09.55,0:00:12.57,Default,,0000,0000,0000,,Zuerst müssen wir aber den Vorteil davon verstehen
Dialogue: 0,0:00:12.57,0:00:17.67,Default,,0000,0000,0000,,Also habe ich ein Programm erstellt, das objektorientiert viel einfacher wird
Dialogue: 0,0:00:17.67,0:00:25.14,Default,,0000,0000,0000,,Es ist ein sehr cooles Programm. Oben hat es zwei Variablen, in denen einfache Objektliterale gespeichert sind.
Dialogue: 0,0:00:25.14,0:00:30.45,Default,,0000,0000,0000,,Das Objektliteral ist eine Art Objekt welches wir mit zwei geschweiften Klammern erstellen
Dialogue: 0,0:00:30.45,0:00:34.41,Default,,0000,0000,0000,,und dann schreiben wir alle Eigenschaftsnamen und Werte hinein.
Dialogue: 0,0:00:34.41,0:00:39.24,Default,,0000,0000,0000,,Wir haben also zwei dieser Objektliteralvariablen, und hier unten die Funktion drawWinston,
Dialogue: 0,0:00:39.24,0:00:41.13,Default,,0000,0000,0000,,die ein einziges Argument erwartet,
Dialogue: 0,0:00:41.13,0:00:47.88,Default,,0000,0000,0000,,und es dann zeichnet, sie zeichnet ein Bild basierend auf den x und y Eigenschaften des Objekts
Dialogue: 0,0:00:47.88,0:00:53.11,Default,,0000,0000,0000,,und dann eine Beschriftung basierend auf den Eigenschaften nickname und age des Objekts
Dialogue: 0,0:00:53.11,0:00:58.16,Default,,0000,0000,0000,,Und jetzt endlich hier unten, rufen wir drawWinston() für den Teenager und den Adult auf,
Dialogue: 0,0:00:58.16,0:01:01.01,Default,,0000,0000,0000,,und das ist es, was angezeigt wird.
Dialogue: 0,0:01:01.01,0:01:06.37,Default,,0000,0000,0000,,Ziemlich cool. Wenn wir uns jetzt diese Objektliterale ansehen,
Dialogue: 0,0:01:06.37,0:01:11.41,Default,,0000,0000,0000,,fällt uns auf, dass sie sich sehr ähnlich sehen.
Dialogue: 0,0:01:11.41,0:01:17.84,Default,,0000,0000,0000,,Beide haben die gleichen Eigenschaften und können von der gleichen Funktion drawWinston() verwendet werden.
Dialogue: 0,0:01:17.84,0:01:24.07,Default,,0000,0000,0000,,Wenn du dir das überlegst, beschreiben tatsächlich beide einen Typ von Winston, korrekt?
Dialogue: 0,0:01:24.07,0:01:28.80,Default,,0000,0000,0000,,Stell dir vor, dass es eine Art abstrakten Typ von Winston in der Welt gibt,
Dialogue: 0,0:01:28.80,0:01:36.46,Default,,0000,0000,0000,,jeder Winston hat die gleichen Eigenschaften wie einen Spitznamen, ein Alter, ein X und ein Y.
Dialogue: 0,0:01:36.46,0:01:42.16,Default,,0000,0000,0000,,Hier haben wir gerade zwei Instanzen eines Winstons erstellt um einen bestimmten Winston zu beschreiben
Dialogue: 0,0:01:42.16,0:01:48.46,Default,,0000,0000,0000,,. Dies ist also ein jugendlicher Winston und dies ist ein erwachsener Winston.
Dialogue: 0,0:01:48.46,0:01:54.76,Default,,0000,0000,0000,,Aber sie sind sich wirklich sehr ähnlich und es gibt eine Menge Dinge, die sie gemeinsam haben.
Dialogue: 0,0:01:54.76,0:02:01.30,Default,,0000,0000,0000,,Wenn man darüber nachdenkt, funktioniert die Welt auch so: Wir haben abstrakte Datentypen wie Menschen und Leute
Dialogue: 0,0:02:01.30,0:02:05.96,Default,,0000,0000,0000,,wir alle sind nur spezielle Instanzen dieser Typen mit unseren eigenen kleinen Eigenschaften.
Dialogue: 0,0:02:05.96,0:02:14.95,Default,,0000,0000,0000,,Jetzt können wir objektorientierte Techniken in Javascript verwenden, so dass diese Winston Variablen
Dialogue: 0,0:02:14.95,0:02:21.83,Default,,0000,0000,0000,,Instanzen eines Winston-Objekts sind und so wissen, dass sie diese Dinge gemeinsam haben.
Dialogue: 0,0:02:21.83,0:02:27.97,Default,,0000,0000,0000,,Dafür müssen wir als erstes diesen abstrakten Datentyp Winston beschreiben
Dialogue: 0,0:02:27.97,0:02:30.90,Default,,0000,0000,0000,,Und das tun wir, indem wir eine Variable erstellen
Dialogue: 0,0:02:30.90,0:02:38.93,Default,,0000,0000,0000,,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,
Dialogue: 0,0:02:38.93,0:02:42.20,Default,,0000,0000,0000,,und wir setzen sie gleich mit einer Funktion.
Dialogue: 0,0:02:42.20,0:02:47.03,Default,,0000,0000,0000,,Diese Funktion ist eine spezielle Funktion, die wir "Konstruktor" nennen
Dialogue: 0,0:02:47.03,0:02:52.04,Default,,0000,0000,0000,,sie wird jedes Mal aufgerufen, wenn wir eine neue Winston-Instanz erstellen.
Dialogue: 0,0:02:52.04,0:02:57.86,Default,,0000,0000,0000,,Wenn wir einen Teenage-Winston erstellen wollen, rufen wir diese Funktion auf, auch für einen Adult-Winston, rufen diese Funktion auf.
Dialogue: 0,0:02:57.86,0:03:06.42,Default,,0000,0000,0000,,Das bedeutet, dass diese Funktion alle Argumente erhalten sollte, die sie braucht, um einen vollständigen Winston zu erstellen.
Dialogue: 0,0:03:06.42,0:03:11.32,Default,,0000,0000,0000,,In diesem Fall braucht sie also einen nickname, ein age, ein x und ein y.
Dialogue: 0,0:03:11.32,0:03:15.06,Default,,0000,0000,0000,,Sobald wir diese Argumente erhalten haben, müssen wir etwas mit ihnen machen,
Dialogue: 0,0:03:15.06,0:03:21.48,Default,,0000,0000,0000,,also müssen wir diese Informationen an das Winston-Objekt anhängen.
Dialogue: 0,0:03:21.48,0:03:28.67,Default,,0000,0000,0000,,Dazu verwenden wir ein neues spezielles Schlüsselwort, genannt "this", welches sich auf die aktuelle Objektinstanz bezieht.
Dialogue: 0,0:03:28.67,0:03:34.92,Default,,0000,0000,0000,,Wir sagen also this.nickname, was bedeutet, dass die Eigenschaft Nickname dieses Objekts gleich ist mit
Dialogue: 0,0:03:34.92,0:03:38.42,Default,,0000,0000,0000,,was auch immer dem Konstruktor übergeben wird, okay?
Dialogue: 0,0:03:38.42,0:03:45.73,Default,,0000,0000,0000,,Und this.age ist gleich dem Age, das übergeben wird, this.x ist gleich dem x und this.y
Dialogue: 0,0:03:45.73,0:03:48.38,Default,,0000,0000,0000,,ist gleich dem y, das übergeben wird.
Dialogue: 0,0:03:48.38,0:03:57.50,Default,,0000,0000,0000,,Jetzt haben wir einen abstrakten Datentyp Winston, der einen Konstruktor hat, mit dem wir einen neuen Winston erstellen können.
Dialogue: 0,0:03:57.50,0:04:00.33,Default,,0000,0000,0000,,Also versuchen wir nun, ihn zu benutzen!
Dialogue: 0,0:04:00.33,0:04:05.24,Default,,0000,0000,0000,,Wir werden wieder winstonTeen erstellen, aber dieses Mal sagen wir winstonTeen gleich,
Dialogue: 0,0:04:05.24,0:04:10.38,Default,,0000,0000,0000,,und anstelle der geschweiften Klammern sagen wir "equals new Winston".
Dialogue: 0,0:04:10.38,0:04:13.95,Default,,0000,0000,0000,,Wir sagen also: "Wir versuchen, eine neue Winson-Instanz zu erstellen".
Dialogue: 0,0:04:13.95,0:04:22.30,Default,,0000,0000,0000,,und dann geben wir die Informationen ein, die er braucht, also "Winsteen", 15, 20, 50, okay?
Dialogue: 0,0:04:22.30,0:04:27.50,Default,,0000,0000,0000,,Und nun können wir die alte Instanz löschen, weil wir sie nicht mehr brauchen.
Dialogue: 0,0:04:27.50,0:04:31.08,Default,,0000,0000,0000,,Alles klar? Jetzt haben wir einen neuen Winsteen erstellt.
Dialogue: 0,0:04:31.08,0:04:35.72,Default,,0000,0000,0000,,Und wir können sagen winstonAdult = new Winston()
Dialogue: 0,0:04:35.72,0:04:39.96,Default,,0000,0000,0000,,und natürlich ist sein Name "Mr. Winst-a-lot", ein süsser Name.
Dialogue: 0,0:04:39.96,0:04:47.41,Default,,0000,0000,0000,,Er ist 30, und ist bei 229 und 50. Alles klar? Gut, dann können wir dieses Objektliteral löschen.
Dialogue: 0,0:04:47.41,0:04:50.81,Default,,0000,0000,0000,,Und, tada! Unser Code funktioniert immer noch.
Dialogue: 0,0:04:50.81,0:04:58.09,Default,,0000,0000,0000,,Was wir hier also gemacht haben, ist, dass wir gesagt haben, okay, es gibt diesen abstrakten Typ von Daten, nämlich diesen Winston
Dialogue: 0,0:04:58.09,0:05:05.27,Default,,0000,0000,0000,,und wir können neue Winston Instanzen erstellen, die diese Eigenschaften haben, die einzigartig für sie sind
Dialogue: 0,0:05:05.27,0:05:08.80,Default,,0000,0000,0000,,Und wir speichern einfach diese Eigenschaften darin
Dialogue: 0,0:05:08.80,0:05:14.38,Default,,0000,0000,0000,,Und das Speichern ist wirklich wichtig. Du weisst, dass wir hier den Nickname und Age haben.
Dialogue: 0,0:05:14.38,0:05:20.21,Default,,0000,0000,0000,,Wenn wir versehentlich, this.age nicht hätten, würde jetzt "undefined" stehen.
Dialogue: 0,0:05:20.21,0:05:23.10,Default,,0000,0000,0000,,Das liegt daran, dass diese Funktion drawWinston() hier unten,
Dialogue: 0,0:05:23.10,0:05:28.16,Default,,0000,0000,0000,,erwartet, dass jedes Objekt, das ihr übergeben wird, eine Eigenschaft age hat.
Dialogue: 0,0:05:28.16,0:05:30.89,Default,,0000,0000,0000,,Und wenn wir nicht this.age gesagt haben,
Dialogue: 0,0:05:30.89,0:05:34.03,Default,,0000,0000,0000,,dann gibt es keine Eigenschaft age. Wir haben es an den Konstruktor übergeben
Dialogue: 0,0:05:34.03,0:05:39.36,Default,,0000,0000,0000,,aber dann nichts damit gemacht, wir müssen es tatsächlich mit dem Schlüsselwort "this" an das Objekt anhängen.
Dialogue: 0,0:05:39.36,0:05:41.44,Default,,0000,0000,0000,,Also fügen wir dies wieder hinzu
Dialogue: 0,0:05:41.44,0:05:46.36,Default,,0000,0000,0000,,Jetzt denkst du vielleicht, okay, du hast deinen Code zum Laufen gebracht und machst diese schicken Dinge,
Dialogue: 0,0:05:46.36,0:05:50.59,Default,,0000,0000,0000,,Aber, all das ergibt ja immer noch das gleiche, was wir vorher hatten.
Dialogue: 0,0:05:50.59,0:05:55.100,Default,,0000,0000,0000,,Aber das coole ist, dass nun alle unsere Winstons durch den gleichen Konstruktor gehen
Dialogue: 0,0:05:55.100,0:06:00.83,Default,,0000,0000,0000,,Wenn wir also wollen, können wir einige Dinge für alle Winstons auf einmal ändern
Dialogue: 0,0:06:00.83,0:06:06.06,Default,,0000,0000,0000,,einfach hier drin. Also vielleicht das Alter, wir wollen eigentlich "Years old" sagen.
Dialogue: 0,0:06:06.06,0:06:12.80,Default,,0000,0000,0000,,Wir können das einfach hier einfügen, und jetzt sagen alle unsere Winstons "15 Years old", "30 Years old", cool!
Dialogue: 0,0:06:12.80,0:06:17.28,Default,,0000,0000,0000,,Sie haben also Dinge die einzigartig an ihnen sind, aber dann haben Gemeinsamkeiten
Dialogue: 0,0:06:17.28,0:06:20.97,Default,,0000,0000,0000,,Und das ist eine wirklich coole Sache an objektorientierter Programmierung, diese Idee,
Dialogue: 0,0:06:20.97,0:06:26.63,Default,,0000,0000,0000,,dass es diese Art von Objekten in der Welt gibt, und dass man Instanzen dieser Objekte erstellen kann
Dialogue: 0,0:06:26.63,0:06:29.92,Default,,0000,0000,0000,,und es gibt einige Dinge die ähnlich sind, wie zum Beispiel, dass sie alle die gleichen Eigenschaften haben,
Dialogue: 0,0:06:29.92,0:06:35.53,Default,,0000,0000,0000,,Dann gibt es Dinge, die sich unterscheiden, wie z.B. dass diese Eigenschaft einen anderen Wert hat als diese andere Eigenschaft
Dialogue: 0,0:06:35.53,0:06:40.74,Default,,0000,0000,0000,,Aber dann, können wir das gleiche Verhalten mit ihnen machen, wie die gleichen Funktionen aufrufen
Dialogue: 0,0:06:40.74,0:06:45.83,Default,,0000,0000,0000,,und diese auf ähnliche Weise verwenden. Das sind also einige der coolen Sachen der objektorientierte Programmierung
Dialogue: 0,0:06:45.83,0:06:48.69,Default,,0000,0000,0000,,aber wie du sehen wirst, gibt es noch eine Menge mehr.
Dialogue: 0,0:06:48.69,0:06:51.00,Default,,0000,0000,0000,,Also, bleib dran!\N