Classes JavaScript

La programmation orientée objet, ou en anglais Object-oriented programming (OOP), est une structure de code dans laquelle chaque élément est un objet. Chaque donnée est une propriété et chaque action est une méthode sur l’objet correspondant à son élément.

Par exemple, chaque item sur une liste d’épicerie pourrait être un objet avec différentes propriétés, telles que:

• Un nom
• Une catégorie d'aliment (fruit, légume, viande, légumineuse...)
• Un statut indiquant si l'item est dans le panier ou non
• etc.

La liste d’épicerie pourrait contenir plusieurs éléments, mais ils partageraient tous les mêmes propriétés de base.

Par exemple:

const tacos = { nom: “🌮”, categorie: "céréale", dansLePanier: false, } const tomate = { nom: “🍅”, categorie: "legume", dansLePanier: false, }

Chaque objet partage les mêmes propriétés (nom, categorie et dansLePanier), mais a des valeurs différentes. Ainsi, il est possible d’interroger chaque élément afin de savoir s’il est dansLePanier ou non.

À l’heure actuelle, la meilleure façon de programmer en orienté objet est d’utiliser des classes. Chaque classe permet de créer un certain type d’objet. Tous les objets créés à partir d’une même classe partagent les mêmes propriétés et méthodes, ce qui assure une cohérence entre chacun de ces objets.

Une classe de base ressemble à ceci:

class NomDeMaClasse { constructor() { } }

• Le mot class indique qu'une classe s'apprête à être définie.
• NomDeMaClasse correspond au nom donné à la classe.
• constructor est une méthode spéciale appelée automatiquement lorsqu'un nouvel objet est créé à partir de la classe. Il permets de définir les propriétés de base du nouvel objet.

Par exemple, si une classe devait permettre de créer des items dans une liste d’épicerie, elle ressemblerait probablement à quelque chose comme ceci:

class ItemEpicerie { constructor(nom, categorie) { this.nom = nom; this.categorie = categorie; this.dansLePanier = false; } }

• La classe a un nom représentatif du type d’objet qu’elle crée ItemEpicerie.
• Le constructeur s’attend à recevoir en paramètre un élément intitulé nom.
• La propriété this.nom doit correspondre à l’élément nom reçu en paramètre.
• La propriété this.categorie doit correspondre à l’élément categorie reçu en paramètre.
• Finalement, la propriété dansLePanier est initialisée avec la valeur par défaut false.

Classe JavaScript Instanciation

Pour créer un objet à partir d’une classe, il faut l’instancier.

La déclaration class Nomdeclasse de la classe sert à indiquer au système la structure de la classe mais ça ne crée rien officiellement.

La création d'une instance new Nomdeclasse crée un première version concrète d'une instance de la classe. Il peut exister plusieurs instances de la classe. Chaque instance peut avoir ses propres valeurs selon les propriétés déterminées par le modèe de la classe.

Il faut utiliser le mot réservé new pour créer une nouvelle instance. Il faut ensuite spécifier le nom de la classe à utiliser pour créer l’élément et optionnellement, lui fournir des paramètres à utiliser.

Par exemple, il est possible de recréer l’élément tacos ainsi:

new ItemEpicerie(“🌮”, "céréale"); Remarquez comment le nom “🌮” est passé en paramètre. Si un ou des paramètres sont définis lors de l’instanciation d’un objet, ils sont automatiquement passés au constructeur.

Cette instanciation retournera l’objet suivant 👇.

{ nom: “🌮”, categorie: "céréale", dansLePanier: false, }

Si l’objet doit être accessible après sa création, il est nécessaire de le stocker dans une variable. Par exemple:

const tacos = new ItemEpicerie(“🌮”);

Ainsi, il est possible d'accéder au statut l’objet comme suit:

console.log(tacos.dansLePanier); // false Méthodes

Pour ajouter une action à un objet, on définit ce que l’on appel une une méthode. Les méthodes sont des fonctions au même titre que le constructeur. Cependant, contrairement au constructeur, elles ne sont pas appelés automatiquement. Il faut donc les appeler manuellement au moment désiré.

Par exemple, pour créer un élément HTML correspondant notre l’item d’épicerie, il serait possible de créer une méthode.

class ItemEpicerie { constructor(nom, categorie) { this.nom = nom; this.categorie = categorie; this.dansLePanier = false; } creerHTML() { this.el = document.createElement('div'); this.el.innerText = this.nom + "(" this categorie + ")"; document.body.appendChild(this.el); } }

Cette méthode se créée premièrement une propriété el qui contiendra un div.
Le div, via sa référence this.el, se fait ensuite insérer un texte. Ce texte correspond au nom de l’élément. Par exemple: “🌮”.

Par elle-même, cette méthode ne fait rien, puisqu’elle n’est pas appelée. Il faut donc définir un appel. Cet appel pourrait être fait à différents endroits.

Méthode d'une classe JavaScript

À l’extérieur de la classe

const tacos = new ItemEpicerie(“🌮”); tacos.creerHTML();

À l’intérieur de la classe

Par exemple, dans le constructeur si l’on souhaite que cette méthode soit appelée à chaque fois qu’un élément est créé.

À partir d’un événement défini dans la classe

Par exemple, lorsque l’élément el est cliqué, appeler une méthode permettant de faire alterner la valeur de la propriété dansLePanier de true à false et vice-versa.

Afin de rendre le changement perceptible, ajoutons ou retirons la classe .barre sur l’élément en fonction de la valeur dansLePanier.

EXERCICE Classe: Mario Blocks Pour cet exercice nous allons créer une “map” de blocs basée sur le premier jeu Super Mario Bros du Nintendo qui popularisa plusieurs principes majeurs du jeux vidéo, tel que le défilement horizontal, les boss et les raccourcis secrets.

Multiples instances

Concevoir son code en orienté objet offre la flexibilité de créer rapidement et facilement plusieurs objets similaires.

Par exemple, il serait possible de créer plusieurs éléments d'une liste d’épicerie à partir d’un champ texte et d’un bouton, en créant un nouvel item à partir de la valeur dans le champ texte lorsque le bouton est appuyé.

EXERCICE Classe: Chats Pour cet exercice vous nous allons utiliser les classes JavaScript afin de créer un générateur de chats à 9 vies

Sous-classe

Une sous-classe est en quelque sorte un remix d’une autre classe. On part d’une classe existante et on lui apporte des modifications. 🎛️

Par exemple, il est possible de partir de la classe ItemEpicerie pour créer la classe ItemEpicerieEpice en utilisant le mot réservé extends comme suit:

class ItemEpicerieEpice extends ItemEpicerie { constructor(nom, categorie) { super(`🌶️ 🔥 ${nom}`, categorie); } }

super('🌶️ 🔥 ${nom}') indique de créer l’objet à partir de la classe originale. L’objet possède donc toutes les mêmes propriétés et méthodes qu’un objet créé avec ItemEpicerie, mais peut être bonifié, comme dans cet exemple où le nom est préfixé par des émojis indiquant que la nourriture est épicé.

Extends class super()

EXERCICE Classe: Space Invaders créer un générateur d’extra-terrestres inspiré d’un des jeux les plus célèbres et influents de l’histoire: Space Invaders