Objekt vererbung (Video Version)

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.