Klassen und Objekte Prototype
Ein Prototyp ist das Objekt welches als Vorlage für alle Objekte dient, die mittels new aus einer Funktion erzeugt werden. Dieser Prototyp ist in der Eigenschaft prototype hinterlegt. Nachdem man ein Objekt erzeugt hat, kann man auf verschiedene Arten auf diesen Prototyp zugreifen oder Rückschlüsse über den verwendeten Prototyp und die verwendete Konstruktorfunktion ziehen.
prototype__proto__Object.getPrototypeOf()constructor
function Car(color, doors){
this.color = color;
this.doors = doors;
this.aboutExtras = function(){
console.log("The color is: "+this.color+" Doors: "+this.doors)}
}
var ford = new Car("red", 4);
Car.prototype
ford.__proto__
Object.getPrototypeOf(ford);
ford.constructor;
Erweiterungen mit prototype
Mittels prototype kann man eine Klasse um eine Eigenschaft erweitern. Im folgenden wird die Objektklasse von der alle anderen Klassen erben, um die Eigenschaft author erweitert.
Object.prototype.author = "";
Diese Eigenschaft steht in allen Objekten dieses Typs und allen Unterklassen zur Verfügung. Beschränken wir die Eigenschaften auf die Klasse Image. Wir sehen wie bestehende Eigenschaften und neue Eigenschaften genutzt werden.
Image.prototype.titel = "";
Image.prototype.wert = 0;
Image.prototype.getDatum = function(dat){
return "Datum "+ dat;
}
var b1 = new Image();
b1.src = "img/bild2.gif";
b1.titel = "Das Jesuskind";
b1.author = "Christoph Weihrauch";
b1.wert = 20000;
document.write("<img src="+b1.src+"><br>"+b1.titel+" "+b1.author+" "+b1.getDatum("24.12.2000");
Achtung nicht alle Browser unterstützen das Prototyping bei allen Klassen.
Prototype an ein eigenes Objekt anhängen
Hier wird mit prototype eine selbst erzeugte Klasse erweitert.
<script >
function Auto(marke, farbe)
{
this.marke = marke;
this.farbe = farbe;
}
Auto.prototype.benzinWarnung = function()
{
alert("Benzin ist alle");
}
</script>
<script>
opel = new Auto("Opel", "rot");
opel.benzinWarnung();
</script>
Der prototypenbasierte Vererbungsmechnismus ist dynamisch. Ein Objekt erbt seine Eigenschaften von seinem Prototyp. Das geschieht auch dann, wenn Eigenschaften oder Methoden nach Erstellung des Objekts geändert werden. So hat man die Möglichkeit auch die eingebauten Javascript Klassen zu erweitern.
In diesem Beispiel wurde mittels einer Funktion ein Objekt erstellt. Nun hat man die Möglichkeit im Nachhinein Eigenschaften und Methoden anzuhängen und zwar mit der Schlüsselwort prototype. Das bedeutet im Prototyp des Konstruktors wird eine Methode erstellt.
Auto.prototype.aboutExtras = function(){ anweisung; anweisung;};
Hier eine ausführliche Erklärung in Englisch zum Thema Klassen und Objekte in Javascript mozilla/ javascript
In einer rein klassenbasierten Programmiersprache, ist jede Klasse nach außen hin verkapselt, abgeschlossen. In der Klasse erfolgt die komplette Definition des Objektes. Man hat nicht die Möglichkeit, einem Objekt in Nachhinein zusätzliche Eigenschaften oder Methoden hinzuzufügen. Das geschieht alles in der Klassendefinition. Klassen können voneinander erben und somit erbt die erbende Klasse alle Eigenschaften und Methoden der Elternklasse.
In einer prototypenbasierten Programmiersprache kann man einem Objekt im Nachhinein eine Methode hinzufügen. Über die Klasseneigenschaft prototype ist auch eine Art Vererbung möglich, denn so kann man an eine vorhandene Javascript-Klasse (Date, String...) eine Methode anhängen.
Im obigen Beispiel wird die Methode "benzinWarnung" mittels der Klasseneigenschaft prototype im Nachhinein der Klasse Auto angehängt. Im Nachhinein bedeutet, dass auch alle schon vorhandenen Objekte diese Methode bekommen. Der Sinn wird deutlich wenn man die Reihenfolge etwas verändert. Die Prototype Funktion wird also dem Konstruktor des Prototypen zugewiesen, der Prototyp ist in diesem Falle Auto.
<script language="JavaScript" type="text/javascript">
function Auto(marke, farbe)
{
this.marke = marke;
this.farbe = farbe;
}
opel = new Auto("Opel", "rot");
Auto.prototype.farbInfo = function()
{
alert("Farbe ist "+this.farbe);
}
opel.farbInfo(); // alert mit Meldung "Farbe ist rot"
</script>
