Wir sind zurück mit unserem Programm, das Winstons erzeugt
aber ich habe einen neuen Objekttyp Hopper hinzugefügt, weil Hopper einsam war.
Ich definiere Hopper auf die gleiche Weise wie Winston, du weißt schon
Ich beginne mit dem Konstruktor und nehme die gleichen Eigenschaften und dann
draw() und dann talk() und dann habe ich noch eine weitere Methode hinzugefügt,
die Horray() heisst weil Hoppers, im Gegensatz zu den Winstons,
wirklich gerne feiern. Jetzt habe ich am Ende der Funktion
zwei neue Hopper Objekte: Kleiner Hopper und großer Hopper
und sie gezeichnet und bei dem einen talk() und bei dem anderen horray() aufgerufen
Also ist das ziemlich gut
Nun, wenn wir uns den Code hier oben ansehen
fällt dir vielleicht etwas Interessantes auf. Und zwar,
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
Und dann ist diese Funktion Talk auch genau gleich wie die Funktion talk() von Winston
und beide haben auch eine Funktion draw()
also gibt es eine Menge Gemeinsamkeiten zwischen diesen beiden Objekttypen
und das macht Sinn, weil Hopper und Winston zwei sehr ähnliche Objekttypen sind
Wenn du dir die echte Welt vorstellst, da haben
außerhalb des Computers die meisten Objekttypen einige Ähnlichkeiten
mit anderen Objekttypen.
Wie z.B. im Tierreich. Alle Tiere
sind sich irgendwie ähnlich. Und dann haben wir verschiedene Arten von Tieren
wie Menschen. Und die Menschen haben auch diese Ähnlichkeiten
aber haben auch ihre eigenen einzigartigen Ähnlichkeiten untereinander.
Wir könnten also sagen, dass
Tier ein Objekttyp ist, von dem der menschliche Objekttyp Funktionalität erbt.
Wir fangen nicht komplett bei Null an, sondern fügen die Funktionalität hinzu, die wir von einem Tier bekommen.
Wie alle Tiere Geräusche machen
verwenden alle Menschen Sprache
Nun dieses Konzept der Objektvererbung
ist auch in der Programmierung sehr nützlich.
Wir können eine Kette von Objektvererbung in unserem Javascript erstellen.
Überlege dir dazu was
an unseren Objekttypen gemeinsam ist.
Dann überlege dir einen Namen
Wir werden einen neuen Objekttyp für
das Basisobjekt erstellen
Nennen wir ihn also creature.
Beide sind Kreaturen.
Also sagen wir var creature gleich. Und jetzt brauchen wir unseren Konstruktor
Also lass uns einfach den von Hopper klauen, denn der ist gleich wie Winston.
Okey.
Und dann... schauen wir mal.
Jetzt wollen wir...
Was wollen wir als nächstes?
Wir fügen die Funktion "talk" hinzu.
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.
Okay, cool.
Jetzt haben wir also diesen Objekttyp "creature".
Aber wir müssen Hopper tatsächlich sagen, dass Hopper eigentlich
seine Funktionalität von der Kreatur erbt.
Wir können das also, indem wir diese Zeile hier schreiben.
Wir sagen Hopper.prototype
ist gleich object.create
creature.prototype
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.
Und das bedeutet, dass jedes Mal, wenn es nach einer Funktion auf einem Hopper sucht, wird es zuerst auf Hoppers Prototyp schauen,
aber dann, wenn es das nicht findet, wird es schauen, ob sie auf dem Prototyp der Kreatur ist.
Und dies nennen wir die Prototypenkette.
Wenn wir das gemacht haben, sollten wir auf Hopper eigentlich die Funktion talk()
löschen können.
Weil sie bereits auf Creature existiert,
welche in der Prototypen-Kette weiter oben ist.
Fertig? ta ta da....
Es hat geklappt!
Es funktioniert, weil sie stattdessen auf dem Prototyp creature gefunden wird.
Ähm... Versuchen wir sie also auch bei Winston zu löschen.
Okay. Hier hat es nicht funktioniert, es heisst, das Objekt hat keine Methode talk.
Warum ist das so? Nun wir haben den Konstruktor von Winston,
draw() und auch talk() entfernt.
Hast du bemerkt, dass wir vergessen haben, Winson's Prototyp zu sagen, dass er auf
dem Prototyp von creature basiert.
Wir brauchen diese wichtige Zeile.
Winston.prototype=object.create
creature.prototype.
Ta Da!
Aber beachte etwas wichtiges.
Ich habe diese Zeile nach dem Konstruktor, aber vor allem anderen in den
Konstruktor-Prototyp geschrieben.
Das macht man normalerweise auch so.
So beginnt man am Anfang,
Anfangs sieht ein Prototyp so aus
Aber dann fügen wir immer mehr Sachen zu dem Prototyp hinzu
Weil es etwas geben könnte, das nur bei Winstons oder nur bei Hoppern zu finden ist
Etwas, das es bei Kreaturen nicht gibt.
Das ist ziemlich cool.
Hmm. Wenn wir uns das jetzt anschauen, haben wir immer noch etwas wiederholten Code.
Der Code des Konstruktors.
Richtig? Wir haben diesen dreifach!
Können wir ihn also einfach löschen?
Versuchen wir es
Hm. Mmm... Das scheint nicht zu funktionieren
Denn unser Hopper oben links aufgetaucht und hat alles um sich herum vergessen.
Das liegt daran, dass Javascript nicht davon ausgeht, dass du den gleichen Konstruktor haben willst, auch wenn du den Prototyp davon ableitest.
Es lässt dich deinen eigenen Konstruktor für diese Objekte definieren.
Aber es gibt auch einen einfachen Weg, einen Konstruktor auf einem Objekt aufzurufen
Wir tun dies indem wir schreiben
creature.call(this,nickname,age,x,y)
Es hat Funktionier! Yeah! Was macht dies nun?
Es ruft die Funktion creature auf, den Konstruktor.
Es ruft diese Funktion auf, und sagt, okay du solltest diese Konstruktorfunktion aufrufen, als ob
sie von diesem Hopper Objekt aufgerufen wurde
so, als ob sie mit diesen Argumenten aufgerufen wurde.
Das sind die Argumente, mit denen der Hopper aufgerufen wurde.
Und das wird am Ende einfach diesen Code ausführen, als ob er genau hier wäre.
Und genau das wollen wir. Es hat funktioniert.
Und wir können weitermachen und
diese Zeile ebenfalls in den
Konstruktor von Winston kopieren.
Und es funktioniert. Juhui!
Na gut. Also schau dir das an. Wir haben alle unsere gemeinsamen Eigenschaften und Funktionalitäten in diesem einzigen Basisobjekttyp gekapselt, der Kreatur
Wir haben zwei Objekttypen erstellt, die von diesem Basisobjekt erben.
Sie erben einige Funktionen, aber fügen auch ihre eigenen hinzu.
Und das coole daran ist, dass wir die gemeinsame Funktionalität an einer einzigen Stelle ändern können.
Wir können z.B. das Alter ändern und sagen: "plus years old".
Jetzt hat jeder "Years old" am Ende.
Oder wir ändern die Funktion talk() und machen "woo". Und jetzt sagen sowohl Winstons als auch Hoppers "woo"
So, jetzt wo du gesehen hast, wie man Objekttypen erstellt und von Objekttypen erbt
kannst du dir überlegen, wie das in Zeichnungen, Simulationen und Spielen nützlich sein könnte.
Vielleicht hast du z.B. ein Spiel und du hast viele Arten von Charakteren darin
und alle von ihnen können laufen, aber nur einige können springen.
Das ist eine perfekte Anwendung von Objekttypen und Vererbung.
Aber ich wette, du kannst dir auch noch viele andere Möglichkeiten ausdenken.