1
00:00:01,342 --> 00:00:05,959
Da du nun etwas Javascript verstehst, möchte ich dir eine coole Art der Programmierung zeigen

2
00:00:05,959 --> 00:00:09,546
Etwas, das wir "objektorientierte Programmierung" nennen.

3
00:00:09,546 --> 00:00:12,570
Zuerst müssen wir aber den Vorteil davon verstehen

4
00:00:12,570 --> 00:00:17,668
Also habe ich ein Programm erstellt, das objektorientiert viel einfacher wird

5
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.

6
00:00:25,138 --> 00:00:30,448
Das Objektliteral ist eine Art Objekt welches wir mit zwei geschweiften Klammern erstellen

7
00:00:30,448 --> 00:00:34,409
und dann schreiben wir alle Eigenschaftsnamen und Werte hinein.

8
00:00:34,409 --> 00:00:39,241
Wir haben also zwei dieser Objektliteralvariablen, und hier unten die Funktion drawWinston,

9
00:00:39,241 --> 00:00:41,129
die ein einziges Argument erwartet,

10
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

11
00:00:47,882 --> 00:00:53,107
und dann eine Beschriftung basierend auf den Eigenschaften nickname und age des Objekts

12
00:00:53,107 --> 00:00:58,164
Und jetzt endlich hier unten, rufen wir drawWinston() für den Teenager und den Adult auf,

13
00:00:58,164 --> 00:01:01,012
und das ist es, was angezeigt wird.

14
00:01:01,012 --> 00:01:06,366
Ziemlich cool. Wenn wir uns jetzt diese Objektliterale ansehen,

15
00:01:06,366 --> 00:01:11,410
fällt uns auf, dass sie sich sehr ähnlich sehen.

16
00:01:11,410 --> 00:01:17,842
Beide haben die gleichen Eigenschaften und können von der gleichen Funktion drawWinston() verwendet werden.

17
00:01:17,842 --> 00:01:24,072
Wenn du dir das überlegst, beschreiben tatsächlich beide einen Typ von Winston, korrekt?

18
00:01:24,072 --> 00:01:28,796
Stell dir vor, dass es eine Art abstrakten Typ von Winston in der Welt gibt,

19
00:01:28,796 --> 00:01:36,460
jeder Winston hat die gleichen Eigenschaften wie einen Spitznamen, ein Alter, ein X und ein Y.

20
00:01:36,460 --> 00:01:42,162
Hier haben wir gerade zwei Instanzen eines Winstons erstellt um einen bestimmten Winston zu beschreiben

21
00:01:42,162 --> 00:01:48,465
. Dies ist also ein jugendlicher Winston und dies ist ein erwachsener Winston.

22
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.

23
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

24
00:02:01,295 --> 00:02:05,958
wir alle sind nur spezielle Instanzen dieser Typen mit unseren eigenen kleinen Eigenschaften.

25
00:02:05,958 --> 00:02:14,948
Jetzt können wir objektorientierte Techniken in Javascript verwenden, so dass diese Winston Variablen

26
00:02:14,948 --> 00:02:21,834
Instanzen eines Winston-Objekts sind und so wissen, dass sie diese Dinge gemeinsam haben.

27
00:02:21,834 --> 00:02:27,974
Dafür müssen wir als erstes diesen abstrakten Datentyp Winston beschreiben

28
00:02:27,974 --> 00:02:30,900
Und das tun wir, indem wir eine Variable erstellen

29
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,

30
00:02:38,934 --> 00:02:42,196
und wir setzen sie gleich mit einer Funktion.

31
00:02:42,196 --> 00:02:47,030
Diese Funktion ist eine spezielle Funktion, die wir "Konstruktor" nennen

32
00:02:47,030 --> 00:02:52,042
sie wird jedes Mal aufgerufen, wenn wir eine neue Winston-Instanz erstellen.

33
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.

34
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.

35
00:03:06,417 --> 00:03:11,324
In diesem Fall braucht sie also einen nickname, ein age, ein x und ein y.

36
00:03:11,324 --> 00:03:15,063
Sobald wir diese Argumente erhalten haben, müssen wir etwas mit ihnen machen,

37
00:03:15,063 --> 00:03:21,483
also müssen wir diese Informationen an das Winston-Objekt anhängen.

38
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.

39
00:03:28,672 --> 00:03:34,921
Wir sagen also this.nickname, was bedeutet, dass die Eigenschaft Nickname dieses Objekts gleich ist mit

40
00:03:34,921 --> 00:03:38,419
was auch immer dem Konstruktor übergeben wird, okay?

41
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

42
00:03:45,728 --> 00:03:48,385
ist gleich dem y, das übergeben wird.

43
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.

44
00:03:57,500 --> 00:04:00,327
Also versuchen wir nun, ihn zu benutzen!

45
00:04:00,327 --> 00:04:05,245
Wir werden wieder winstonTeen erstellen, aber dieses Mal sagen wir winstonTeen gleich,

46
00:04:05,245 --> 00:04:10,376
und anstelle der geschweiften Klammern sagen wir "equals new Winston".

47
00:04:10,376 --> 00:04:13,950
Wir sagen also: "Wir versuchen, eine neue Winson-Instanz zu erstellen".

48
00:04:13,950 --> 00:04:22,305
und dann geben wir die Informationen ein, die er braucht, also "Winsteen", 15, 20, 50, okay?

49
00:04:22,305 --> 00:04:27,502
Und nun können wir die alte Instanz löschen, weil wir sie nicht mehr brauchen.

50
00:04:27,502 --> 00:04:31,082
Alles klar? Jetzt haben wir einen neuen Winsteen erstellt.

51
00:04:31,082 --> 00:04:35,722
Und wir können sagen winstonAdult = new Winston()

52
00:04:35,722 --> 00:04:39,960
und natürlich ist sein Name "Mr. Winst-a-lot", ein süsser Name.

53
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.

54
00:04:47,410 --> 00:04:50,812
Und, tada! Unser Code funktioniert immer noch.

55
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

56
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

57
00:05:05,272 --> 00:05:08,799
Und wir speichern einfach diese Eigenschaften darin

58
00:05:08,799 --> 00:05:14,379
Und das Speichern ist wirklich wichtig. Du weisst, dass wir hier den Nickname und Age haben.

59
00:05:14,379 --> 00:05:20,212
Wenn wir versehentlich, this.age nicht hätten, würde jetzt "undefined" stehen.

60
00:05:20,212 --> 00:05:23,103
Das liegt daran, dass diese Funktion drawWinston() hier unten,

61
00:05:23,103 --> 00:05:28,162
erwartet, dass jedes Objekt, das ihr übergeben wird, eine Eigenschaft age hat.

62
00:05:28,162 --> 00:05:30,894
Und wenn wir nicht this.age gesagt haben,

63
00:05:30,894 --> 00:05:34,029
dann gibt es keine Eigenschaft age. Wir haben es an den Konstruktor übergeben

64
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.

65
00:05:39,363 --> 00:05:41,444
Also fügen wir dies wieder hinzu

66
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,

67
00:05:46,361 --> 00:05:50,589
Aber, all das ergibt ja immer noch das gleiche, was wir vorher hatten.

68
00:05:50,589 --> 00:05:55,996
Aber das coole ist, dass nun alle unsere Winstons durch den gleichen Konstruktor gehen

69
00:05:55,996 --> 00:06:00,830
Wenn wir also wollen, können wir einige Dinge für alle Winstons auf einmal ändern

70
00:06:00,830 --> 00:06:06,059
einfach hier drin. Also vielleicht das Alter, wir wollen eigentlich "Years old" sagen.

71
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!

72
00:06:12,804 --> 00:06:17,281
Sie haben also Dinge die einzigartig an ihnen sind, aber dann haben Gemeinsamkeiten

73
00:06:17,281 --> 00:06:20,968
Und das ist eine wirklich coole Sache an objektorientierter Programmierung, diese Idee,

74
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

75
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,

76
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

77
00:06:35,528 --> 00:06:40,741
Aber dann, können wir das gleiche Verhalten mit ihnen machen, wie die gleichen Funktionen aufrufen

78
00:06:40,741 --> 00:06:45,829
und diese auf ähnliche Weise verwenden. Das sind also einige der coolen Sachen der objektorientierte Programmierung

79
00:06:45,829 --> 00:06:48,690
aber wie du sehen wirst, gibt es noch eine Menge mehr.

80
00:06:48,690 --> 00:06:51,000
Also, bleib dran!