[Script Info]
Title: 
[Events]
Format: Layer, Start, End, Style, Name, MarginL, MarginR, MarginV, Effect, Text
Dialogue: 0,0:00:01.19,0:00:03.17,Default,,0000,0000,0000,,Wir sind zurück mit unserem Programm, das Winstons erzeugt
Dialogue: 0,0:00:03.17,0:00:07.59,Default,,0000,0000,0000,,aber ich habe einen neuen Objekttyp Hopper hinzugefügt, weil Hopper einsam war.
Dialogue: 0,0:00:07.59,0:00:11.92,Default,,0000,0000,0000,,Ich definiere Hopper auf die gleiche Weise wie Winston, du weißt schon
Dialogue: 0,0:00:11.92,0:00:15.84,Default,,0000,0000,0000,,Ich beginne mit dem Konstruktor und nehme die gleichen Eigenschaften und dann
Dialogue: 0,0:00:15.84,0:00:20.50,Default,,0000,0000,0000,,draw() und dann talk() und dann habe ich noch eine weitere Methode hinzugefügt,
Dialogue: 0,0:00:20.50,0:00:23.81,Default,,0000,0000,0000,,die Horray() heisst weil Hoppers, im Gegensatz zu den Winstons,
Dialogue: 0,0:00:23.81,0:00:27.92,Default,,0000,0000,0000,,wirklich gerne feiern. Jetzt habe ich am Ende der Funktion
Dialogue: 0,0:00:27.92,0:00:31.17,Default,,0000,0000,0000,,zwei neue Hopper Objekte: Kleiner Hopper und großer Hopper
Dialogue: 0,0:00:31.17,0:00:35.35,Default,,0000,0000,0000,,und sie gezeichnet und bei dem einen talk() und bei dem anderen horray() aufgerufen
Dialogue: 0,0:00:35.35,0:00:37.51,Default,,0000,0000,0000,,Also ist das ziemlich gut
Dialogue: 0,0:00:37.51,0:00:39.93,Default,,0000,0000,0000,,Nun, wenn wir uns den Code hier oben ansehen
Dialogue: 0,0:00:39.93,0:00:41.82,Default,,0000,0000,0000,,fällt dir vielleicht etwas Interessantes auf. Und zwar,
Dialogue: 0,0:00:41.97,0:00:52.32,Default,,0000,0000,0000,,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
Dialogue: 0,0:00:52.32,0:01:00.75,Default,,0000,0000,0000,,Und dann ist diese Funktion Talk auch genau gleich wie die Funktion talk() von Winston
Dialogue: 0,0:01:00.76,0:01:03.90,Default,,0000,0000,0000,,und beide haben auch eine Funktion draw()
Dialogue: 0,0:01:03.90,0:01:07.92,Default,,0000,0000,0000,,also gibt es eine Menge Gemeinsamkeiten zwischen diesen beiden Objekttypen
Dialogue: 0,0:01:07.92,0:01:11.34,Default,,0000,0000,0000,,und das macht Sinn, weil Hopper und Winston zwei sehr ähnliche Objekttypen sind
Dialogue: 0,0:01:11.34,0:01:15.30,Default,,0000,0000,0000,,Wenn du dir die echte Welt vorstellst, da haben
Dialogue: 0,0:01:15.30,0:01:20.01,Default,,0000,0000,0000,,außerhalb des Computers die meisten Objekttypen einige Ähnlichkeiten
Dialogue: 0,0:01:20.01,0:01:21.42,Default,,0000,0000,0000,,mit anderen Objekttypen.
Dialogue: 0,0:01:21.42,0:01:23.64,Default,,0000,0000,0000,,Wie z.B. im Tierreich. Alle Tiere
Dialogue: 0,0:01:23.64,0:01:26.81,Default,,0000,0000,0000,,sind sich irgendwie ähnlich. Und dann haben wir verschiedene Arten von Tieren
Dialogue: 0,0:01:26.81,0:01:31.59,Default,,0000,0000,0000,,wie Menschen. Und die Menschen haben auch diese Ähnlichkeiten
Dialogue: 0,0:01:31.59,0:01:34.33,Default,,0000,0000,0000,,aber haben auch ihre eigenen einzigartigen Ähnlichkeiten untereinander.
Dialogue: 0,0:01:34.33,0:01:36.20,Default,,0000,0000,0000,,Wir könnten also sagen, dass
Dialogue: 0,0:01:36.20,0:01:38.97,Default,,0000,0000,0000,,Tier ein Objekttyp ist, von dem der menschliche Objekttyp Funktionalität erbt.
Dialogue: 0,0:01:38.97,0:01:46.86,Default,,0000,0000,0000,,Wir fangen nicht komplett bei Null an, sondern fügen die Funktionalität hinzu, die wir von einem Tier bekommen.
Dialogue: 0,0:01:46.86,0:01:49.20,Default,,0000,0000,0000,,Wie alle Tiere Geräusche machen
Dialogue: 0,0:01:49.20,0:01:51.41,Default,,0000,0000,0000,,verwenden alle Menschen Sprache
Dialogue: 0,0:01:51.41,0:01:54.67,Default,,0000,0000,0000,,Nun dieses Konzept der Objektvererbung
Dialogue: 0,0:01:54.67,0:01:56.70,Default,,0000,0000,0000,,ist auch in der Programmierung sehr nützlich.
Dialogue: 0,0:01:56.70,0:01:59.86,Default,,0000,0000,0000,,Wir können eine Kette von Objektvererbung in unserem Javascript erstellen.
Dialogue: 0,0:01:59.86,0:02:02.53,Default,,0000,0000,0000,,Überlege dir dazu was
Dialogue: 0,0:02:02.53,0:02:04.42,Default,,0000,0000,0000,,an unseren Objekttypen gemeinsam ist.
Dialogue: 0,0:02:04.42,0:02:06.63,Default,,0000,0000,0000,,Dann überlege dir einen Namen
Dialogue: 0,0:02:06.63,0:02:08.68,Default,,0000,0000,0000,,Wir werden einen neuen Objekttyp für
Dialogue: 0,0:02:08.68,0:02:10.58,Default,,0000,0000,0000,,das Basisobjekt erstellen
Dialogue: 0,0:02:10.58,0:02:12.09,Default,,0000,0000,0000,,Nennen wir ihn also creature.
Dialogue: 0,0:02:12.09,0:02:13.87,Default,,0000,0000,0000,,Beide sind Kreaturen.
Dialogue: 0,0:02:13.87,0:02:17.83,Default,,0000,0000,0000,,Also sagen wir var creature gleich. Und jetzt brauchen wir unseren Konstruktor
Dialogue: 0,0:02:17.83,0:02:22.34,Default,,0000,0000,0000,,Also lass uns einfach den von Hopper klauen, denn der ist gleich wie Winston.
Dialogue: 0,0:02:22.34,0:02:23.76,Default,,0000,0000,0000,,Okey.
Dialogue: 0,0:02:23.76,0:02:27.17,Default,,0000,0000,0000,,Und dann... schauen wir mal.
Dialogue: 0,0:02:27.17,0:02:28.14,Default,,0000,0000,0000,,Jetzt wollen wir...
Dialogue: 0,0:02:28.14,0:02:29.51,Default,,0000,0000,0000,,Was wollen wir als nächstes?
Dialogue: 0,0:02:29.51,0:02:31.97,Default,,0000,0000,0000,,Wir fügen die Funktion "talk" hinzu.
Dialogue: 0,0:02:31.97,0:02:39.30,Default,,0000,0000,0000,,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.
Dialogue: 0,0:02:39.30,0:02:41.68,Default,,0000,0000,0000,,Okay, cool.
Dialogue: 0,0:02:41.68,0:02:45.30,Default,,0000,0000,0000,,Jetzt haben wir also diesen Objekttyp "creature".
Dialogue: 0,0:02:45.30,0:02:47.81,Default,,0000,0000,0000,,Aber wir müssen Hopper tatsächlich sagen, dass Hopper eigentlich
Dialogue: 0,0:02:47.81,0:02:51.14,Default,,0000,0000,0000,,seine Funktionalität von der Kreatur erbt.
Dialogue: 0,0:02:51.25,0:02:51.25,Default,,0000,0000,0000,,Wir können das also, indem wir diese Zeile hier schreiben.
Dialogue: 0,0:02:53.82,0:02:58.60,Default,,0000,0000,0000,,Wir sagen Hopper.prototype
Dialogue: 0,0:02:58.60,0:03:01.97,Default,,0000,0000,0000,,ist gleich object.create
Dialogue: 0,0:03:01.97,0:03:04.98,Default,,0000,0000,0000,,creature.prototype
Dialogue: 0,0:03:04.98,0:03:14.20,Default,,0000,0000,0000,,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.
Dialogue: 0,0:03:14.20,0:03:22.34,Default,,0000,0000,0000,,Und das bedeutet, dass jedes Mal, wenn es nach einer Funktion auf einem Hopper sucht, wird es zuerst auf Hoppers Prototyp schauen,
Dialogue: 0,0:03:22.34,0:03:26.43,Default,,0000,0000,0000,,aber dann, wenn es das nicht findet, wird es schauen, ob sie auf dem Prototyp der Kreatur ist.
Dialogue: 0,0:03:26.43,0:03:29.20,Default,,0000,0000,0000,,Und dies nennen wir die Prototypenkette.
Dialogue: 0,0:03:29.20,0:03:34.03,Default,,0000,0000,0000,,Wenn wir das gemacht haben, sollten wir auf Hopper eigentlich die Funktion talk()
Dialogue: 0,0:03:34.03,0:03:35.63,Default,,0000,0000,0000,,löschen können.
Dialogue: 0,0:03:35.63,0:03:38.30,Default,,0000,0000,0000,,Weil sie bereits auf Creature existiert,
Dialogue: 0,0:03:38.30,0:03:40.23,Default,,0000,0000,0000,,welche in der Prototypen-Kette weiter oben ist.
Dialogue: 0,0:03:40.23,0:03:42.54,Default,,0000,0000,0000,,Fertig? ta ta da....
Dialogue: 0,0:03:42.54,0:03:43.92,Default,,0000,0000,0000,,Es hat geklappt!
Dialogue: 0,0:03:43.92,0:03:46.80,Default,,0000,0000,0000,,Es funktioniert, weil sie stattdessen auf dem Prototyp creature gefunden wird.
Dialogue: 0,0:03:46.80,0:03:51.23,Default,,0000,0000,0000,,Ähm... Versuchen wir sie also auch bei Winston zu löschen.
Dialogue: 0,0:03:51.23,0:03:57.68,Default,,0000,0000,0000,,Okay. Hier hat es nicht funktioniert, es heisst, das Objekt hat keine Methode talk.
Dialogue: 0,0:03:57.68,0:04:01.26,Default,,0000,0000,0000,,Warum ist das so? Nun wir haben den Konstruktor von Winston,
Dialogue: 0,0:04:01.26,0:04:03.52,Default,,0000,0000,0000,,draw() und auch talk() entfernt.
Dialogue: 0,0:04:03.52,0:04:07.92,Default,,0000,0000,0000,,Hast du bemerkt, dass wir vergessen haben, Winson's Prototyp zu sagen, dass er auf
Dialogue: 0,0:04:07.92,0:04:09.41,Default,,0000,0000,0000,,dem Prototyp von creature basiert.
Dialogue: 0,0:04:09.41,0:04:10.73,Default,,0000,0000,0000,,Wir brauchen diese wichtige Zeile.
Dialogue: 0,0:04:10.73,0:04:14.19,Default,,0000,0000,0000,,Winston.prototype=object.create
Dialogue: 0,0:04:14.19,0:04:16.70,Default,,0000,0000,0000,,creature.prototype.
Dialogue: 0,0:04:16.70,0:04:19.29,Default,,0000,0000,0000,,Ta Da!
Dialogue: 0,0:04:19.29,0:04:20.43,Default,,0000,0000,0000,,Aber beachte etwas wichtiges.
Dialogue: 0,0:04:20.43,0:04:24.70,Default,,0000,0000,0000,,Ich habe diese Zeile nach dem Konstruktor, aber vor allem anderen in den
Dialogue: 0,0:04:24.70,0:04:26.88,Default,,0000,0000,0000,,Konstruktor-Prototyp geschrieben.
Dialogue: 0,0:04:26.88,0:04:29.33,Default,,0000,0000,0000,,Das macht man normalerweise auch so.
Dialogue: 0,0:04:29.33,0:04:31.23,Default,,0000,0000,0000,,So beginnt man am Anfang,
Dialogue: 0,0:04:31.23,0:04:33.86,Default,,0000,0000,0000,,Anfangs sieht ein Prototyp so aus
Dialogue: 0,0:04:33.86,0:04:36.80,Default,,0000,0000,0000,,Aber dann fügen wir immer mehr Sachen zu dem Prototyp hinzu
Dialogue: 0,0:04:36.80,0:04:41.67,Default,,0000,0000,0000,,Weil es etwas geben könnte, das nur bei Winstons oder nur bei Hoppern zu finden ist
Dialogue: 0,0:04:41.67,0:04:43.91,Default,,0000,0000,0000,,Etwas, das es bei Kreaturen nicht gibt.
Dialogue: 0,0:04:43.91,0:04:45.40,Default,,0000,0000,0000,,Das ist ziemlich cool.
Dialogue: 0,0:04:45.40,0:04:50.26,Default,,0000,0000,0000,,Hmm. Wenn wir uns das jetzt anschauen, haben wir immer noch etwas wiederholten Code.
Dialogue: 0,0:04:50.26,0:04:51.52,Default,,0000,0000,0000,,Der Code des Konstruktors.
Dialogue: 0,0:04:51.52,0:04:53.37,Default,,0000,0000,0000,,Richtig? Wir haben diesen dreifach!
Dialogue: 0,0:04:53.37,0:04:56.64,Default,,0000,0000,0000,,Können wir ihn also einfach löschen?
Dialogue: 0,0:04:56.64,0:05:00.06,Default,,0000,0000,0000,,Versuchen wir es
Dialogue: 0,0:05:00.06,0:05:03.51,Default,,0000,0000,0000,,Hm. Mmm... Das scheint nicht zu funktionieren
Dialogue: 0,0:05:03.51,0:05:07.34,Default,,0000,0000,0000,,Denn unser Hopper oben links aufgetaucht und hat alles um sich herum vergessen.
Dialogue: 0,0:05:07.34,0:05:15.26,Default,,0000,0000,0000,,Das liegt daran, dass Javascript nicht davon ausgeht, dass du den gleichen Konstruktor haben willst, auch wenn du den Prototyp davon ableitest.
Dialogue: 0,0:05:15.26,0:05:19.36,Default,,0000,0000,0000,,Es lässt dich deinen eigenen Konstruktor für diese Objekte definieren.
Dialogue: 0,0:05:19.36,0:05:23.98,Default,,0000,0000,0000,,Aber es gibt auch einen einfachen Weg, einen Konstruktor auf einem Objekt aufzurufen
Dialogue: 0,0:05:23.98,0:05:27.100,Default,,0000,0000,0000,,Wir tun dies indem wir schreiben
Dialogue: 0,0:05:27.100,0:05:35.47,Default,,0000,0000,0000,,creature.call(this,nickname,age,x,y)
Dialogue: 0,0:05:35.47,0:05:40.60,Default,,0000,0000,0000,,Es hat Funktionier! Yeah! Was macht dies nun?
Dialogue: 0,0:05:40.60,0:05:43.68,Default,,0000,0000,0000,,Es ruft die Funktion creature auf, den Konstruktor.
Dialogue: 0,0:05:43.68,0:05:50.34,Default,,0000,0000,0000,,Es ruft diese Funktion auf, und sagt, okay du solltest diese Konstruktorfunktion aufrufen, als ob
Dialogue: 0,0:05:50.34,0:05:53.76,Default,,0000,0000,0000,,sie von diesem Hopper Objekt aufgerufen wurde
Dialogue: 0,0:05:53.76,0:05:56.97,Default,,0000,0000,0000,,so, als ob sie mit diesen Argumenten aufgerufen wurde.
Dialogue: 0,0:05:56.97,0:05:59.43,Default,,0000,0000,0000,,Das sind die Argumente, mit denen der Hopper aufgerufen wurde.
Dialogue: 0,0:05:59.43,0:06:03.59,Default,,0000,0000,0000,,Und das wird am Ende einfach diesen Code ausführen, als ob er genau hier wäre.
Dialogue: 0,0:06:03.59,0:06:05.40,Default,,0000,0000,0000,,Und genau das wollen wir. Es hat funktioniert.
Dialogue: 0,0:06:05.40,0:06:09.71,Default,,0000,0000,0000,,Und wir können weitermachen und
Dialogue: 0,0:06:09.71,0:06:11.52,Default,,0000,0000,0000,,diese Zeile ebenfalls in den
Dialogue: 0,0:06:11.52,0:06:13.76,Default,,0000,0000,0000,,Konstruktor von Winston kopieren.
Dialogue: 0,0:06:13.76,0:06:16.53,Default,,0000,0000,0000,,Und es funktioniert. Juhui!
Dialogue: 0,0:06:16.53,0:06:24.90,Default,,0000,0000,0000,,Na gut. Also schau dir das an. Wir haben alle unsere gemeinsamen Eigenschaften und Funktionalitäten in diesem einzigen Basisobjekttyp gekapselt, der Kreatur
Dialogue: 0,0:06:24.90,0:06:28.21,Default,,0000,0000,0000,,Wir haben zwei Objekttypen erstellt, die von diesem Basisobjekt erben.
Dialogue: 0,0:06:28.21,0:06:30.98,Default,,0000,0000,0000,,Sie erben einige Funktionen, aber fügen auch ihre eigenen hinzu.
Dialogue: 0,0:06:30.98,0:06:36.34,Default,,0000,0000,0000,,Und das coole daran ist, dass wir die gemeinsame Funktionalität an einer einzigen Stelle ändern können.
Dialogue: 0,0:06:36.34,0:06:40.30,Default,,0000,0000,0000,,Wir können z.B. das Alter ändern und sagen: "plus years old".
Dialogue: 0,0:06:40.30,0:06:43.91,Default,,0000,0000,0000,,Jetzt hat jeder "Years old" am Ende.
Dialogue: 0,0:06:43.91,0:06:49.87,Default,,0000,0000,0000,,Oder wir ändern die Funktion talk() und machen "woo". Und jetzt sagen sowohl Winstons als auch Hoppers "woo"
Dialogue: 0,0:06:49.87,0:06:56.45,Default,,0000,0000,0000,,So, jetzt wo du gesehen hast, wie man Objekttypen erstellt und von Objekttypen erbt
Dialogue: 0,0:06:56.45,0:07:01.35,Default,,0000,0000,0000,,kannst du dir überlegen, wie das in Zeichnungen, Simulationen und Spielen nützlich sein könnte.
Dialogue: 0,0:07:01.35,0:07:05.26,Default,,0000,0000,0000,,Vielleicht hast du z.B. ein Spiel und du hast viele Arten von Charakteren darin
Dialogue: 0,0:07:05.26,0:07:08.79,Default,,0000,0000,0000,,und alle von ihnen können laufen, aber nur einige können springen.
Dialogue: 0,0:07:08.79,0:07:11.97,Default,,0000,0000,0000,,Das ist eine perfekte Anwendung von Objekttypen und Vererbung.
Dialogue: 0,0:07:11.97,0:07:15.97,Default,,0000,0000,0000,,Aber ich wette, du kannst dir auch noch viele andere Möglichkeiten ausdenken.