Partie 1 : Découvrir React
Partie 2 : Acquérir les bases de React
Partie 3 : Aller plus loin avec React
Partie 4 : Bonus
Partie 5 : Obtenir votre sticker React

2.1. L’héritage

En plus d’avoir ajouté les classes en JavaScript, ES6 continue avec l’héritage. Plus besoin de l’héritage prototypal.

Avant, il fallait appeler la méthode call pour hériter du constructeur. Par exemple, pour développer une classe Voiture et Moto, héritant de la classe Vehicule, on écrivait quelque chose comme ça :

function Vehicule (color, drivingWheel) { 
 this.color = color; 
 this.drivingWheel = drivingWheel; 
 this.isEngineStart = false; 
} 
Vehicule.prototype.start = function start() { 
 this.isEngineStart = true; 
} 
Vehicule.prototype.stop = function stop() { 
 this.isEngineStart = false; 
}; 
// Une voiture est un véhicule. 
function Car(color, drivingWheel, seatings) { 
 Vehicule.call(this, color, drivingWheel); 
 this.seatings = seatings; 
} 
Vehicule.prototype = Object.create(Vehicule.prototype); 
// Une moto est un véhicule également. 
function Motorbike (color, drivingWheel, unleash) { 
 Vehicule.call(this, color, drivingWheel); 
 this.unleash = unleash; 
} 
Motorbike.prototype = Object.create(Vehicule.prototype);

Maintenant on peut utiliser le mot clé extends en JavaScript (non, non ce n’est pas une blague) et le mot-clé super, pour rattacher le tout à la « superclasse », ou « classe-mère » si vous préférez.

class Vehicule { 
 constructor(color, drivingWheel, isEngineStart = false) { 
  this.color = color; 
  this.drivingWheel = drivingWheel; 
  this.isEngineStart = isEngineStart; 
 } 
 start() { 
  this.isEngineStart = true; 
 } 
 stop() { 
  this.isEngineStart = false; 
 } 
} 
class Car extends Vehicule { 
 constructor(color, drivingWheel, isEngineStart = false, seatings) { 
  super(color, drivingWheel, isEngineStart); 
  this.seatings = seatings; 
 } 
} 
class Moto extends Vehicule { 
 constructor(color, drivingWheel, isEngineStart = false, unleash) { 
 super(color, drivingWheel, isEngineStart);
  this.unleash = unleash; 
 }
}

Le code est quand même plus clair et concis avec cette nouvelle syntaxe. 👍