1. Startseite
2. JavaScript
3. Klassen

Klassen

Das Arbeiten mit Klassen gibt uns eine weitere Möglichkeit, Objekte zu erstellen.

Eine Klasse ist so was wie ein Bauplan für Objekte. Innerhalb einer Klasse definiert man die Eigenschaften und Methoden, die ein Objekt haben soll. Klassen werden in JavaScript mit dem Schlüsselwort "class" eingeleitet und erhalten darauf den Klassennamen. In geschweiften Klammern steht der Inhalt der Klasse, der auch als Klassenkörper bezeichnet wird.

class Auto{
 constructor(marke, typ, kraftstoff, baujahr, farbe) {
  this.marke = marke;
  this.typ = typ;
  this.kraftstoff = kraftstoff;
  this.baujahr = baujahr;
  this.farbe = farbe;
 }
 zeigeBeschreibung = function() {
   console.log(this.marke + ' ' + this.typ + ' in ' + this.farbe);
 }
}

Innerhalb des Klassenkörpers werden die Methoden definiert, die für die Objektinstanzen zur Verfügung stehen sollen. Die Methode "constructor" ist eine Methode zum Erzeugen und initialisieren von Objekten, die mit dem Schlüsselwort "class" erzeugt wurden. Das Erzeugen neuer Objekte erfolgt wie bei den Konstruktorfunktionen mit dem Schlüsselwort "new".

let kleinwagen = new Auto('Seat', 'Ibiza', 'Benzin', 2017, 'Gold', function() {
 console.log(this.marke + ' ' + this.typ + ' in ' + this.farbe)
});
let mittelklasse = new Auto('Mazda', '6', 'Benzin', 2018, 'Blau', function() {
 console.log(this.marke + ' ' + this.typ + ' in ' + this.farbe)
});
let suv = new Auto('BMW', 'X1', 'Diesel', 2016, 'Schwarz', function() {
 console.log(this.marke + ' ' + this.typ + ' in ' + this.farbe)
});
kleinwagen.zeigeBeschreibung();
mittelklasse.zeigeBeschreibung();
suv.zeigeBeschreibung();

Bei der Verwendung von Klassen in JavaScript handelt es sich also um eine Alternative zu den Konstruktorfunktionen.

Wenn wir im Nachhinein noch zusätzliche Eigenschaften an unsere Objekte vergeben möchten, dann können wir ganz einfach mit der "Punkt-Notation", auch "dot-Syntax" genannt, unser Objekt aufrufen und zusätzliche Eigenschaften vergeben:

kleinwagen.tankdeckel = 'rechts';

Auf dieselbe Weise können wir bestehende Eigenschaftswerte verändern, indem wir die Objekteigenschaft aufrufen und einfach einen neuen Wert zuweisen.

kleinwagen.farbe = 'Rot';

Kommen wir zum Löschen von Eigenschaften. Das Löschen übernimmt der Operator "delete", doch vorher überprüfen wir mit dem "in"-Operator ob das Objekt über die zu löschende Eigenschaft verfügt.

console.log('farbe' in suv); // true
console.log(suv.farbe); // Schwarz
delete suv.farbe;

Nun wurde die Eigenschaft "farbe" aus dem Objekt "suv" gelöscht, zum Überprüfen schreiben wir wieder:

console.log('farbe' in suv); // false
console.log(suv.farbe); // undefined

Zudem können wir auch Erweiterung an Objekten verhindern. Mit der "object.preventExtension()"-Methode verhindern wir zukünftige Erweiterungen am Objekt, welches in den Runden Klammern angegeben werden muss.

object.preventExtension(suv);
suv.getriebe = 'Automatik';

Die Erweiterung "suv.getriebe" führt nun zu einem "ReferenceError". Bereits existierende Objekt Eigenschaften können aber nach wie vor verändert werden. Mit der "object.seal()"-Methode sorgen wir dafür, dass keine zusätzlichen Eigenschaften konfiguriert werden können.

object.seal(suv);
suv.baujahr = 2000;

Wer aber sein Objekt unveränderbar machen möchte, der geht einen Schritt weiter und verwendet die Methode "object.freeze()"

object.freeze(suv);
suv.kraftstoff = 'Gas';

Das Objekt kann jetzt nicht mehr erweitert werden und zusätzlich können Eigenschaftsattribute auch nicht mehr verändert werden. Auch die Methoden können nun nicht mehr geändert werden. Mit "object.freeze()" ist das gesamte Objekt eingefroren und unveränderlich.