Objekte deklarieren: Der klassische Weg (Konstruktor-Funktionen)

Bevor mit ECMAScript 6 (ES6) die moderne class-Syntax in JavaScript eingeführt wurde, wurden eigene Objekttypen traditionell über sogenannte Konstruktor-Funktionen definiert. Diese Methode ist nach wie vor gültig und hilft, das grundlegende Prototypen-System von JavaScript zu verstehen.

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

Generell (auch in anderen Programmiersprachen) ist eine Konstruktorfunktion, eine Funktion, die beim Erzeugen eines neuen Objekts aufgerufen wird. Sie hat außerdem die Aufgabe, dem Objekt beim Initiieren Argumente zu übergeben. In diesem Beispiel, die Anzahl der Beine, die Länge, das Brüllgeräusch. Beachte, dass die Eigenschaften 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 Parameter laut für die Eigenschaft schrei gewählt.

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

siehe Beispiel

Es lassen sich auch Methoden einfügen, entweder mittels einer anonymen Funktion oder einer Callback Funktion. Besser ist es jedoch, diese Methoden mittels prototype später anzuhängen. Warum erkläre ich hier.

function Saurier(beine, laenge, schrei){
this.beine = beine;
this.laenge = laenge;
this.schrei = schrei;
this.bruellen = function(){alert(this.schrei);}
}
var trex = new Saurier(2, 6, "rrrooaaarrrr);
trex.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 kennst du vielleicht 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