Objekte / Klassen / Konstruktorfunktion

Neben der Literalschreibweise, gibt es eine weitere Möglichkeit Objekte zu erzeugen und zwar mittels einer Konstruktorfunktion. Das hat den Vorteil, dass man damit mehrere Instanzen bilden kann.

Mit dem Schlüsselwort new und dem Aufruf der Konstruktorfunktion, erzeugt man aus einer Klasse eine Instanz dieser Klasse, ein Objekt.

function Saurier(){}

Wenn man typeof new Saurier() abfragt, erhält man als Ergebnis object.

Man kann also mit Javascript irgendeine Funktion nehmen und mit new ein Objekt daraus erzeugen. Eine normale Funktion wird durch das Schlüsselwort new zur Konstruktorfunktion.

Mit this hat man die Möglichkeit Eigenschaften des Objekts innerhalb der Konstruktorfunktion zu definieren.

Erzeugt man ein Objekt davon, kann man die Eigenschaften abfragen.

function Saurier(){
this.beine = 2;
this.laenge = 6;
}

var trex = new Saurier();
console.log(trex.laenge);//6

siehe Beispiel

Man kann auch die Array Notation [] benutzen und die Eigenschaften mit einer for-in Schleife durchlaufen.

for( i in trex){
document.getElementById("anzeige").innerHTML += i+" , "+trex[i]+"<br>";
}

siehe Beispiel

Es lassen sich auch Methoden einfügen, entweder mittels einer anonymen Funktion oder einer Callback Funktion.

function Saurier(){
this.beine = 2;
this.laenge = 6;
this.schrei = "rooaaarrrr";
this.bruellen = function(){alert(this.schrei);}
}
var trex = new Saurier();
trex.bruellen();

siehe Beispiel

Mit der Konstruktorfunktion hat man die Möglichkeit, dem Objekt beim Initiieren Werte zuzuweisen. In diesem Beispiel, die Anzahl der Beine, die Länge, das Brüllgeräusch. Beachte, dass die Eigenschaftren der Klasse mit this. beginnen und die Parameter den gleichen Bezeichner haben können, aber nicht müssen. Um das deutlich zu machen, habe ich den Bezeichner laut für die Eigenschaft schrei gewählt.

function Saurier ( beine, laenge, laut )
{
    this.beine = beine;
    this.laenge = laenge;
    this.schrei = laut;
    this.bruellen = function () { alert( this.schrei ); }
}
var trex = new Saurier( 2, 6, "rooaarrrr" );
let stegosaurus = new Saurier( 4, 7, "grunz" );
trex.bruellen();
stegosaurus.bruellen();

siehe Beispiel

 

Groß und Kleinschreibung

Um Funktionen von Konstruktorfunktionen zu unterscheiden ist es Konvention, dass man die Bezeichner in Konstruktorfunktionen groß schreibt.

typeof, instanceof

Auf der Seite Datentypen, bin ich auf die Operatoren typeof und instanceof eingegangen.
Wendet man diese Operatoren auf das obige Beispiel an, erhält man folgendes:

console.log(typeof trex) // Object  
console.log(trex instanceof Saurier) // true
        

Definierte Klassen und Objekte

Das Erzeugen von Objekten / Instanzen von Klassen kennen Sie schon vom Erzeugen eines Arrays beispielsweise.

let ar = new Array();

Hierbei ist Array() ein Funktionsaufruf und im weiteren Sinne der Aufruf der Konstruktorfunktion. Array ist die "Klasse". Hier wird aus einer Klasse ein Objekt erzeugt.

Was zeichnet in Javascript eine Konstruktorfunktion im Gegensatz zu einer normalen Funktion aus? Gar nichts. Durch das Schlüsselwort new wird daraus eine Konstruktorfunktion. Ruft man die Funktion als Konstruktorfunktion auf, liefert sie eine neue Objektinstanz. Dazu ist kein return notwendig.


Javascript Tipps