0:00:01.187,0:00:03.173
Wir sind zurück mit unserem Programm, das Winstons erzeugt

0:00:03.173,0:00:07.589
aber ich habe einen neuen Objekttyp Hopper hinzugefügt, weil Hopper einsam war.

0:00:07.589,0:00:11.924
Ich definiere Hopper auf die gleiche Weise wie Winston, du weißt schon

0:00:11.924,0:00:15.843
Ich beginne mit dem Konstruktor und nehme die gleichen Eigenschaften und dann

0:00:15.843,0:00:20.498
draw() und dann talk() und dann habe ich noch eine weitere Methode hinzugefügt,

0:00:20.498,0:00:23.808
die Horray() heisst weil Hoppers, im Gegensatz zu den Winstons,

0:00:23.808,0:00:27.924
wirklich gerne feiern. Jetzt habe ich am Ende der Funktion

0:00:27.924,0:00:31.174
zwei neue Hopper Objekte: Kleiner Hopper und großer Hopper

0:00:31.174,0:00:35.347
und sie gezeichnet und bei dem einen talk() und bei dem anderen horray() aufgerufen

0:00:35.347,0:00:37.508
Also ist das ziemlich gut

0:00:37.508,0:00:39.928
Nun, wenn wir uns den Code hier oben ansehen

0:00:39.928,0:00:41.823
fällt dir vielleicht etwas Interessantes auf. Und zwar,

0:00:41.973,0:00:52.324
Dass der Code für Hopper dem Code für Winston sehr ähnlich ist. Schau dir besonders den Konstruktor an. Das ist im Grunde genommen genau der gleiche Code wie unser Konstruktor für Winston

0:00:52.324,0:01:00.748
Und dann ist diese Funktion Talk auch genau gleich wie die Funktion talk() von Winston

0:01:00.763,0:01:03.897
und beide haben auch eine Funktion draw()

0:01:03.897,0:01:07.922
also gibt es eine Menge Gemeinsamkeiten zwischen diesen beiden Objekttypen

0:01:07.922,0:01:11.341
und das macht Sinn, weil Hopper und Winston zwei sehr ähnliche Objekttypen sind

0:01:11.341,0:01:15.299
Wenn du dir die echte Welt vorstellst, da haben

0:01:15.299,0:01:20.009
außerhalb des Computers die meisten Objekttypen einige Ähnlichkeiten

0:01:20.009,0:01:21.423
mit anderen Objekttypen.

0:01:21.423,0:01:23.643
Wie z.B. im Tierreich. Alle Tiere

0:01:23.643,0:01:26.812
sind sich irgendwie ähnlich. Und dann haben wir verschiedene Arten von Tieren

0:01:26.812,0:01:31.588
wie Menschen. Und die Menschen haben auch diese Ähnlichkeiten

0:01:31.588,0:01:34.331
aber haben auch ihre eigenen einzigartigen Ähnlichkeiten untereinander.

0:01:34.331,0:01:36.200
Wir könnten also sagen, dass

0:01:36.205,0:01:38.967
Tier ein Objekttyp ist, von dem der menschliche Objekttyp Funktionalität erbt.

0:01:38.967,0:01:46.864
Wir fangen nicht komplett bei Null an, sondern fügen die Funktionalität hinzu, die wir von einem Tier bekommen.

0:01:46.864,0:01:49.196
Wie alle Tiere Geräusche machen

0:01:49.196,0:01:51.407
verwenden alle Menschen Sprache

0:01:51.407,0:01:54.673
Nun dieses Konzept der Objektvererbung

0:01:54.673,0:01:56.695
ist auch in der Programmierung sehr nützlich.

0:01:56.695,0:01:59.865
Wir können eine Kette von Objektvererbung in unserem Javascript erstellen.

0:01:59.865,0:02:02.529
Überlege dir dazu was

0:02:02.529,0:02:04.425
an unseren Objekttypen gemeinsam ist.

0:02:04.425,0:02:06.633
Dann überlege dir einen Namen

0:02:06.633,0:02:08.675
Wir werden einen neuen Objekttyp für

0:02:08.675,0:02:10.576
das Basisobjekt erstellen

0:02:10.576,0:02:12.094
Nennen wir ihn also creature.

0:02:12.094,0:02:13.873
Beide sind Kreaturen.

0:02:13.873,0:02:17.831
Also sagen wir var creature gleich. Und jetzt brauchen wir unseren Konstruktor

0:02:17.831,0:02:22.342
Also lass uns einfach den von Hopper klauen, denn der ist gleich wie Winston.

0:02:22.342,0:02:23.762
Okey.

0:02:23.762,0:02:27.172
Und dann... schauen wir mal.

0:02:27.172,0:02:28.135
Jetzt wollen wir...

0:02:28.135,0:02:29.506
Was wollen wir als nächstes?

0:02:29.506,0:02:31.966
Wir fügen die Funktion "talk" hinzu.

0:02:31.966,0:02:39.303
Für die Funktion "talk" klauen wir einfach die von Hoppper. Aber natürlich müssen wir sie stattdessen auf dem Prototyp der Kreatur haben.

0:02:39.303,0:02:41.683
Okay, cool.

0:02:41.683,0:02:45.300
Jetzt haben wir also diesen Objekttyp "creature".

0:02:45.300,0:02:47.810
Aber wir müssen Hopper tatsächlich sagen, dass Hopper eigentlich

0:02:47.810,0:02:51.141
seine Funktionalität von der Kreatur erbt.

0:02:51.248,0:02:51.249
Wir können das also, indem wir diese Zeile hier schreiben.

0:02:53.816,0:02:58.595
Wir sagen Hopper.prototype

0:02:58.595,0:03:01.967
ist gleich object.create

0:03:01.967,0:03:04.977
creature.prototype

0:03:04.977,0:03:14.197
Diese Zeile sagt Javascript, dass es den Prototypen von Hopper als Basis nehmen soll, so dass die gesamte Funktionalität von Hopper auf dem Prototyp der Kreatur basiert.

0:03:14.197,0:03:22.342
Und das bedeutet, dass jedes Mal, wenn es nach einer Funktion auf einem Hopper sucht, wird es zuerst auf Hoppers Prototyp schauen,

0:03:22.342,0:03:26.429
aber dann, wenn es das nicht findet, wird es schauen, ob sie auf dem Prototyp der Kreatur ist.

0:03:26.429,0:03:29.196
Und dies nennen wir die Prototypenkette.

0:03:29.196,0:03:34.032
Wenn wir das gemacht haben, sollten wir auf Hopper eigentlich die Funktion talk()

0:03:34.032,0:03:35.634
löschen können.

0:03:35.634,0:03:38.302
Weil sie bereits auf Creature existiert,

0:03:38.302,0:03:40.231
welche in der Prototypen-Kette weiter oben ist.

0:03:40.231,0:03:42.541
Fertig? ta ta da....

0:03:42.541,0:03:43.924
Es hat geklappt!

0:03:43.924,0:03:46.804
Es funktioniert, weil sie stattdessen auf dem Prototyp creature gefunden wird.

0:03:46.804,0:03:51.234
Ähm... Versuchen wir sie also auch bei Winston zu löschen.

0:03:51.234,0:03:57.680
Okay. Hier hat es nicht funktioniert, es heisst, das Objekt hat keine Methode talk.

0:03:57.680,0:04:01.263
Warum ist das so? Nun wir haben den Konstruktor von Winston,

0:04:01.263,0:04:03.517
draw() und auch talk() entfernt.

0:04:03.517,0:04:07.924
Hast du bemerkt, dass wir vergessen haben, Winson's Prototyp zu sagen, dass er auf

0:04:07.924,0:04:09.409
dem Prototyp von creature basiert.

0:04:09.409,0:04:10.731
Wir brauchen diese wichtige Zeile.

0:04:10.731,0:04:14.193
Winston.prototype=object.create

0:04:14.193,0:04:16.704
creature.prototype.

0:04:16.704,0:04:19.290
Ta Da!

0:04:19.290,0:04:20.426
Aber beachte etwas wichtiges.

0:04:20.426,0:04:24.697
Ich habe diese Zeile nach dem Konstruktor, aber vor allem anderen in den

0:04:24.697,0:04:26.878
Konstruktor-Prototyp geschrieben.

0:04:26.878,0:04:29.334
Das macht man normalerweise auch so.

0:04:29.334,0:04:31.230
So beginnt man am Anfang,

0:04:31.230,0:04:33.860
Anfangs sieht ein Prototyp so aus

0:04:33.860,0:04:36.804
Aber dann fügen wir immer mehr Sachen zu dem Prototyp hinzu

0:04:36.804,0:04:41.673
Weil es etwas geben könnte, das nur bei Winstons oder nur bei Hoppern zu finden ist

0:04:41.673,0:04:43.909
Etwas, das es bei Kreaturen nicht gibt.

0:04:43.909,0:04:45.405
Das ist ziemlich cool.

0:04:45.405,0:04:50.256
Hmm. Wenn wir uns das jetzt anschauen, haben wir immer noch etwas wiederholten Code.

0:04:50.256,0:04:51.524
Der Code des Konstruktors.

0:04:51.524,0:04:53.366
Richtig? Wir haben diesen dreifach!

0:04:53.366,0:04:56.638
Können wir ihn also einfach löschen?

0:04:56.638,0:05:00.060
Versuchen wir es

0:05:00.060,0:05:03.509
Hm. Mmm... Das scheint nicht zu funktionieren

0:05:03.509,0:05:07.340
Denn unser Hopper oben links aufgetaucht und hat alles um sich herum vergessen.

0:05:07.340,0:05:15.264
Das liegt daran, dass Javascript nicht davon ausgeht, dass du den gleichen Konstruktor haben willst, auch wenn du den Prototyp davon ableitest.

0:05:15.264,0:05:19.359
Es lässt dich deinen eigenen Konstruktor für diese Objekte definieren.

0:05:19.359,0:05:23.978
Aber es gibt auch einen einfachen Weg, einen Konstruktor auf einem Objekt aufzurufen

0:05:23.978,0:05:27.998
Wir tun dies indem wir schreiben

0:05:27.998,0:05:35.470
creature.call(this,nickname,age,x,y)

0:05:35.470,0:05:40.598
Es hat Funktionier! Yeah! Was macht dies nun?

0:05:40.598,0:05:43.679
Es ruft die Funktion creature auf, den Konstruktor.

0:05:43.679,0:05:50.339
Es ruft diese Funktion auf, und sagt, okay du solltest diese Konstruktorfunktion aufrufen, als ob

0:05:50.339,0:05:53.764
sie von diesem Hopper Objekt aufgerufen wurde

0:05:53.764,0:05:56.968
so, als ob sie mit diesen Argumenten aufgerufen wurde.

0:05:56.968,0:05:59.427
Das sind die Argumente, mit denen der Hopper aufgerufen wurde.

0:05:59.427,0:06:03.589
Und das wird am Ende einfach diesen Code ausführen, als ob er genau hier wäre.

0:06:03.589,0:06:05.397
Und genau das wollen wir. Es hat funktioniert.

0:06:05.397,0:06:09.709
Und wir können weitermachen und

0:06:09.709,0:06:11.515
diese Zeile ebenfalls in den

0:06:11.515,0:06:13.757
Konstruktor von Winston kopieren.

0:06:13.757,0:06:16.531
Und es funktioniert. Juhui!

0:06:16.531,0:06:24.901
Na gut. Also schau dir das an. Wir haben alle unsere gemeinsamen Eigenschaften und Funktionalitäten in diesem einzigen Basisobjekttyp gekapselt, der Kreatur

0:06:24.901,0:06:28.207
Wir haben zwei Objekttypen erstellt, die von diesem Basisobjekt erben.

0:06:28.207,0:06:30.981
Sie erben einige Funktionen, aber fügen auch ihre eigenen hinzu.

0:06:30.981,0:06:36.339
Und das coole daran ist, dass wir die gemeinsame Funktionalität an einer einzigen Stelle ändern können.

0:06:36.339,0:06:40.302
Wir können z.B. das Alter ändern und sagen: "plus years old".

0:06:40.302,0:06:43.908
Jetzt hat jeder "Years old" am Ende.

0:06:43.908,0:06:49.871
Oder wir ändern die Funktion talk() und machen "woo". Und jetzt sagen sowohl Winstons als auch Hoppers "woo"

0:06:49.871,0:06:56.454
So, jetzt wo du gesehen hast, wie man Objekttypen erstellt und von Objekttypen erbt

0:06:56.454,0:07:01.348
kannst du dir überlegen, wie das in Zeichnungen, Simulationen und Spielen nützlich sein könnte.

0:07:01.348,0:07:05.257
Vielleicht hast du z.B. ein Spiel und du hast viele Arten von Charakteren darin

0:07:05.257,0:07:08.793
und alle von ihnen können laufen, aber nur einige können springen.

0:07:08.793,0:07:11.970
Das ist eine perfekte Anwendung von Objekttypen und Vererbung.

0:07:11.970,0:07:15.970
Aber ich wette, du kannst dir auch noch viele andere Möglichkeiten ausdenken.