Classes

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.

Cette approche peut sembler intimidante de prime abord, mais en fait, elle s’apparente à la façon dont l’être humain pense 🧠

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

• Un nom

• 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: “🌮”,
  dansLePanier: false,
} 
 
const tomate = {
  nom: “🍅”,
  dansLePanier: false,
}

Chaque objet partage les mêmes propriétés (nom 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) {
    this.nom = nom;
    this.dansLePanier = false;
  }
}

• La classe à 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.

• Le constructeur définit que le nom de l’objet créé this.nom doit correspondre à l’élément nom reçu en paramètre.

• Finalement, la propriété dansLePanier est initialisée avec la valeur par défaut false.

Instanciation

Pour créer un objet à partir d’une classe, il faut l’instancier. Autrement dit, il faut utiliser le mot réservé new pour annoncer qu’un nouvel élément s’apprête à être déclaré. 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(“🌮”);

Cette instanciation retournera l’objet suivant 👇.

{
  nom: “🌮”,
  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) {
    this.nom = nom;
    this.dansLePanier = false;
  }
  
  creerHTML() {
    this.el = document.createElement('div');
    this.el.innerText = this.nom;
    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.

À 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.

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é.

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) {
    super(`🌶️ 🔥 ${nom}`);
  }
}

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é.