Héritage est un concept central dans la programmation orientée objet, qui te permet d'étendre des classes existantes et d'utiliser leurs propriétés et méthodes. JavaScript a introduit une syntaxe d'héritage plus récente et robuste avec ES6, qui est beaucoup plus facile à gérer que les méthodes Prototype d'origine. Dans ce guide, je vais te montrer comment appliquer l'héritage en JavaScript en utilisant le mot clé extends, et je vais t'expliquer étape par étape comment appeler correctement le constructeur de la classe de base avec super.
Principales conclusions
- L'héritage en JavaScript se fait via le mot clé extends.
- Le constructeur de la classe de base doit être appelé avec super.
- Les variables d'instance peuvent être référencées dans la classe dérivée à l'aide du mot clé this.
Guide étape par étape
Création de la classe de base
Pour commencer avec l'héritage, nous allons d'abord créer une classe de base appelée Shape. Dans cette classe, nous définirons le constructeur ainsi que quelques méthodes.
Voici comment tu définis une classe Shape, qui a un constructeur. Tu peux définir des variables et des fonctions dans ce constructeur auxquelles d'autres classes peuvent accéder.

Exploration de la sous-classe
Après avoir créé la classe de base, tu peux maintenant créer une sous-classe qui hérite de Shape. Dans cet exemple, nous appellerons la nouvelle classe ConcreteShape.
Dans cette sous-classe, nous utilisons le mot clé extends pour indiquer que ConcreteShape hérite de Shape. Le constructeur de la sous-classe appelle le constructeur de la classe de base Shape avec super(), ce qui est nécessaire pour implémenter correctement l'héritage.
Instanciation de la sous-classe
Maintenant que nous avons créé la sous-classe, il est temps de créer une instance de cette classe.
Voici comment tu crées un nouvel objet myShape de la classe ConcreteShape et passes une description au constructeur. Ensuite, tu appelles la méthode print qui affiche la description.
Ajout de propriétés supplémentaires
Tu peux ajouter d'autres propriétés à ta sous-classe ou même des méthodes spécifiques à cette sous-classe.
Ici, tu as étendu la classe ConcreteShape en ajoutant des paramètres supplémentaires au constructeur.
Utilisation de l'héritage
Avec le mot clé super, tu peux appeler la méthode describe de la classe de base pour combiner les propriétés de la classe de base et de la sous-classe.
Résumé – Héritage en JavaScript: d'ES6 à ES13
Dans ce tutoriel, tu as appris comment fonctionne l'héritage en JavaScript, en particulier avec la nouvelle syntaxe class. Tu as vu comment définir des classes, comment hériter d'une classe de base et comment appeler correctement le constructeur. Ces mécanismes facilitent le maintien de ta base de code propre et maintenable en réutilisant efficacement les fonctionnalités.
Questions fréquentes
Quelle est la différence entre super() et this?super() est utilisé pour appeler le constructeur de la classe de base, tandis que this fait référence à l'instance de la classe actuelle.
Pourquoi l'utilisation des classes ES6 est-elle meilleure que celle des prototypes?Les classes ES6 offrent une syntaxe plus claire et plus intuitive, ce qui facilite la lecture et la compréhension du code.
Puis-je avoir plusieurs classes de base?Non, JavaScript ne supporte pas l'héritage multiple. Une classe ne peut hériter que d'une seule autre classe.
Que se passe-t-il si je n'appelle pas super()?Si tu n'appelles pas super(), tu obtiendras une erreur, car le constructeur de la classe de base, qui initialise ce qui est nécessaire pour la classe, ne sera pas exécuté.