Benutzer:Wiko/klassen

Klassen

Wir haben schon gelernt, wie man mit Konstruktorfunktionen Objekte erzeugen kann. Dabei können verschiedene Konstruktorfunktionen verschiedene Objekttypen erzeugen. Eine Klasse ist nun eine etwas ausgefeiltere Art, einen Bauplan für ein Objekt zu erstellen. Außerdem leistet sie noch mehr, aber dazu mehr im Bereich Vererbung.

Klassendeklaration

Analog zu Funktionsausdrücken und Funktionsdeklarationen hat die Klassensyntax zwei Komponenten:

Klassendeklaration

class Person {
  constructor(name, alter) {
    this._name = name;
    this._alter = alter;
  }
}

Klassenausdruck

var Person = class {
  constructor(name, alter) {
    this._name = name;
    this._alter = alter;
  }
}

Wir schreiben im Grunde nichts neues, sondern verwenden die identische Objektstruktur unseres Beispiels aus dem letzten Kapitel. Nur die Schreibweise ist etwas anders. Wir finden jedoch unsere Konstruktorfunktion wieder, hier unter dem festgelegten Namen constructor.

Klassen werden, anders als die meisten Deklarationen in Javascript, nicht nach oben gehoben (Hoisting) und müssen daher vor der ersten Benutzung deklariert werden. Sie können auch nicht überschrieben werden.

Wie Sie mit typeof überprüfen können, ist Person eine Funktion; das instantierte Objekt p jedoch ein Objekt. Öffnen Sie die Konsole mit F12.

var p = new Person('Frizzy', 15);

console.log("typeof Person = "+typeof Person);
console.log("typeof p = "+typeof p);

Die Parameter der Konstruktor-Methode können beliebig genannt werden und sind unabhängig von den Klassen-Variablen.

Methoden definieren

Einfache Methoden

Um eine Klasse funktionsfähig zu machen, müssen innerhalb der Klasse Methoden definiert werden. Eine Methode ist eine Funktion innerhalb einer Klasse.

Person-Objekt mit einer Methode

class Person {

  constructor (name, alter) {
    this._name = name;
    this._alter = alter;
  }

  vorstellen () {
    return "Ich heiße " + this._name + " und bin " + this._alter + " Jahre alt.";
  }
}

Anders als bei unserem Beispiel im letzten Kapitel wird hier die Methode vorstellen nicht innerhalb der Konstruktorfunktion als Funktionsliteral notiert (was durchaus auch möglich wäre), sondern wird ganz klar als Methode neben dem Konstruktor aufgeführt. Das erhöht die Lesbarkeit und macht den Code übersichtlicher.

Um Werte von Klassen-Variablen zu ändern, muss eine Methode mit Parametern definiert werden.

Person-Objekt mit weiteren Methoden

class Person {

  constructor (name, alter) {
    this._name = name;
    this._alter = alter;
  }

  vorstellen () {
    return "Ich heiße " + this._name + " und bin " + this._alter + " Jahre alt.";
  }

  alter (value) {
    this._alter = value;
  }
}

Hier ändert die Methode alter den Inhalt der Klassen-Variablen this._alter Der Name der Klassen-Variablen this._alter darf nicht mit dem Namen der Methode alterübereinstimmen.

Methoden für Events

Soll eine Methode durch einen Event (click, keydown ...) aufgerufen werden, ist zu beachten, dass innerhalb der Methode die Variable this nicht auf die Klasse zeigt, sondern auf das Event-Objekt. Damit ist eine Klassen-Variable, die zB. mit this._alter deklariert wurde, nicht mehr erreichbar. Um trotzdem auf die Variablen der Klasse zugreifen zu können, wird dem Event ein Objekt angeboten, dass die Eigenschaft handleEventbesitzt. Weitere Eigenschaften sind beliebig, eine Eigenschaft für this oder Eigenschaften für Klassen-Variablen müssen vorhanden sein, wenn diese in der bei handleEvent angegebenen Methode benutzt werden sollen.

Person-Objekt mit einer Methode für Events

class Person {

  constructor (name, alter) {
    this._name = name;
    this._alter = alter;
    // object to handle event:
    this.click = {handleEvent:this.hit, self:this};
  }

  vorstellen () {
    return "Ich heiße " + this._name + " und bin " + this._alter + " Jahre alt.";
  }

  alter (value) {
    this._alter = value;
  }

  hit(event) {
    var classThis = this.self;
    return "Ich bin " + classThis._alter + " Jahre alt."
}

In der Methode hit zeigt this auf das Objekt this.click Um die Methode hit aufzurufen, wird dem HTML-Objekt mit der Id "alter" ein EventListener hinzugefügt.

var p = new Person('Frizzy', 15);
var object = document.getElementById("alter");
object.addEventListener("click",p.click);

Ein direkter Aufruf der Methode p.hit führt zu einer Fehlermeldung.