Objectgeoriënteerd programmeren (OOP) is een manier van programmeren die is gebaseerd op het concept van “objecten”, die gegevens kunnen bevatten, in de vorm van velden, oftewel attributen; en code, in de vorm van procedures, vaak bekend als methoden. In JavaScript omvat dit meestal vier belangrijke concepten: Inkapseling, Overerving, Abstractie en Polymorfisme.
1. Definieer een klasse: In JavaScript definiëren we een klasse met het sleutelwoord “class” gevolgd door de naam van de klasse, zoals hieronder:
```
class Rectangle {
constructor(height, width){
this.height = height;
this.width = width;
}
}
```
1. Methoden in een klasse: Methoden zijn functies die zijn gedefinieerd in de body van de klasse. Een methode definieer je net als een functie veld met uitzondering dat je het sleutelwoord ‘function’ niet gebruikt.
```
class Rectangle {
constructor(height, width) {
this.height = height;
this.width = width;
}
// Method
get Area() {
return this.calcArea();
}
calcArea() {
return this.height * this.width;
}
}
```
1. Instantiëren van een klasse : Om een klasse te gebruiken, maak je een object van die klasse met behulp van het “new”-sleutelwoord, zoals hieronder getoond:
```
const square = new Rectangle(10, 10);
```
1. Overerving: Overerving is een manier om nieuwe klassen te maken op basis van bestaande klassen. Het doel is om herhaling van code te verminderen en om de leesbaarheid en onderhoudbaarheid van je code te verbeteren.
```
class ColoredRectangle extends Rectangle {
constructor(height, width, color) {
super(height, width);
this.color = color;
}
displayColor() {
return this.color;
}
}
```
1. Abstractie: JavaScript heeft geen ingebouwde ondersteuning voor abstractie, maar het is mogelijk om dit te bereiken door middel van sluitingen en symbolen (een nieuwe ES6-functie).
1. Polymorfisme: Polymorfisme betekent “vele vormen” in het Grieks. In OOP staat het je toe om dezelfde methode of eigenschap op te roepen op verschillende objecten van verschillende klassen en daar verschillende resultaten mee te bereiken.
```
class Triangle {
constructor(base, height) {
this.base = base;
this.height = height;
}
calcArea() {
return 0.5 * this.base * this.height;
}
}
const myTriangle = new Triangle(5, 10);
const myRectangle = new Rectangle(5, 10);
console.log(myTriangle.calcArea()); // Outputs: 25
console.log(myRectangle.calcArea()); // Outputs: 50
```
Zelfs als beide klassen (Triangle en Rectangle) dezelfde methode delen (calcArea), is het resultaat anders op basis van de klasse van het object dat de operatie aanroept. Dat is polymorfisme.
