08. Classes - xarling/ES6-workshop GitHub Wiki

Declaratie

Een class declareer je zo:

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

Maak een toString functie in de Polygon class die de height en width op de juiste manier terug geeft.

Klik hier voor een oplossing ```toString() { return 'width: ' + this.width + ' height: ' + this.height; } ```

Getters en setters

Ik ben een Java ontwikkelaar zoals jullie waarschijnlijk al wel gemerkt hebben. De eerste keer dat ik een class met properties ging maken met setters en getters deed ik dat op deze manier:

class Polygon {

	constructor(height, width) {
		this.height = height;
		this.width = width;
	}

	set height(height) {
		this.height = height;
	}

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

let polygon = new Polygon(1,3);

Wat gaat hier niet goed? Ik heb de code beschikbaar gemaakt in \08.classes\getters-setters.html. Maak deze code werkend.

Klik hier voor een oplossing this.height is een property van de class. Dus als ik this.height = height in de set gebruik, assign ik naar de height property, aan zichzelf, wat na een tijdje natuurlijk in de problemen komt. Online zie ik vaak de oplossing om een _ te gebruiken voor de inner variabele van de class (dit vind ik zelf niet elegant). Dan krijg je this._height = height.

Extending

Getter

In ES6 zit inheritance. Dit kun je doen door de class te 'extenden'. In /08.classes/extending.html zie je hier een voorbeeld van. Je ziet hier een Voertuig met properties. Nog niet alle eigenschap van Voertuig heeft een getter. Vul de missende getters aan, die gaan we verderop gebruiken.

Klik hier voor een oplossing ```get aantalWielen() { return this._aantalWielen; }```

OldTimers

Voeg een functie toe in de Auto om te bepalen of het een oldTimer is of niet. Deze functie heet isOldTimer. De regel of het een oldTimer is of niet is dat het verschil tussen dit jaar en bouwjaar groter moet zijn dan 25 (ik weet helemaal niet of dit zo is, maar ja, ik mag dit gewoon bedenken).

Klik hier voor een oplossing ```isOldTimer() { return this.ditJaar - this.bouwjaar > this.oldTimerLeeftijd; }```

Motor

Maak zelf een class Motor. Natuurlijk is een motor ook een voertuig (als het niet zo is, doe maar net alsof). De belangrijkste eigenschap van een motor is natuurlijk of het een zijspan is :). Maak de functie isZijSpan. De logica voor het bepalen van het wel of niet zijspan zijn is het aantal wielen. 3 is altijd een zijspan, 2 niet.

Klik hier voor een oplossing ```isZijSpan() { return this.aantalWielen === 3; }```

Static methods

Een method maken we static door er het keyword static voor te zetten. Implementeer een static functie in Auto voor de conversie van een Auto naar een Motor. Zoals iedereen weet haal je twee wielen weg, en dan heb je een motor. Dus maak een nieuwe motor met de juiste eigenschappen van de auto, behalve het aantal wielen.

Klik hier voor een oplossing ```static converteerNaarMotor(auto) { return new Motor(auto.merk, auto.type, auto.bouwjaar, 2); }```
⚠️ **GitHub.com Fallback** ⚠️