Benutzer:Wiko/gewünschte Seite

Methoden innerhalb einer Klasse erzeugen

Einfache Methoden

Beispiel ansehen …

class Car {
  constructor(name, year) {
    this._name = name;
    this._year = year;
  }
	
   showType() {
        document.getElementById('output').innerText = this._name + " " + this._year; 
   }	
}

let myCar = new Car('Tesla', 2020);

myCar.showType();

Innerhalb der Klasse wird nun die Methode showType() deklariert, die dann außerhalb aufgerufen wird und die beiden Eigenschaften des Objekts myCar ausgibt.

Spezielle Methoden

Es gibt zwei spezielle Methoden innerhalb einer Klasse: set und get.

Beispiel ansehen …

class Car {
  constructor(name, year) {
    this._name = name;
    this._year = year;
  }

  set year(value) {
    this._year = value;
  }

  get year() {
    return this.year;
  }
}

let myCar = new Car('Tesla', 2020);

myCar.year = '2021';

let carYear = myCar.year;

Die Variable carYear wird mit '2021' gefüllt. Die so mit set oder get deklarierten Methoden year werden außerhalb der Klasse wie eine Variable verwendet.

Die Namen der Methoden dürfen nicht mit Klassenvariablen übereinstimmen.

Methoden für Events

Soll eine Methode durch einen Event (click, keydown ...) aufgerufen werden, ist zu beachten, dass this dann nicht auf die Klasse zeigt, sondern auf das Event-Objekt. Damit ist eine Klassen-Variable, die zB. mit this._year deklariert wurde, nicht mehr erreichbar. Um trotzdem auf die Variablen der Klasse zugreifen zu können, wird dem Event ein Objekt angeboten.

Beispiel ansehen …

class Car {
  constructor(name, year) {
    this._name = name;
    this._year = year;
    // object to handle event
    this.click = {handleEvent:this.hit, self:this};
  }
  hit(event) {
    var classThis = this.self;
    // code ... //
    document.getElementById('output').innerText = classThis._name + " " + classThis._year;
  }
}

let myCar = new Car('Tesla', 2020);
document.getElementById('output').addEventListener("click",myCar.click);

Beim Anklicken des Objekts mit der Id 'output' wird dieses mit 'Tesla 2020' gefüllt.

Besonderheiten bei setTimeout und setInterval

Den Funktionen window.setTimeout und window.setInterval muss eine Funktion als erster Parameter übergeben werden. Innerhalb dieser Funktion zeigt this auf window. Um innerhalb dieser Funktion auf die Variablen der Klasse zugreifen zu können, muss als dritter Wert this angegeben werden.

Beispiel ansehen …

class Car {
  constructor(name, year) {
    this._name = name;
    this._year = year;
    window.setTimeout(this.showType, 5000, this);
  }
	
   showType(classThis) {
     document.getElementById('output').innerText = classThis._name + " " + classThis._year; 
   }	
}

let myCar = new Car('Tesla', 2020);

Nach 5 Sekunden werden die beiden Eigenschaften des Objekts myCar ausgegeben.

Funktioniert nicht im IE.

Besonderheiten bei forEach

Wird eine Schleife mit forEach innerhalb einer Methode verwendet, ist zu beachten, dass innerhalb der Schleife this undefiniert ist.

Beispiel ansehen …

class Car {
  constructor(name, year) {
    this._name = name;
    this._year = year;
  }

  showType() {
    let classThis = this;
    let text = "";
    ["_name", "_year"].forEach(function (s, i, o) {
      text += classThis[s] + " ";
    }
    document.getElementById('output').innerText = text; 
   }