Introduction aux classes et aux objets en Javascript (ES6)

9 janvier, 2023

Développement Javascript Tutoriels

Table des matières Masquer

1 Qu'est-ce qu'une classe en javascript ?

1.1 Déclaration d'une classe

1.2 Constructeur et méthodes d'une classe

2 Héritage avec les classes

2.1 Utilisation de la méthode super

2.2 Méthodes statiques

3 Comment manipuler les propriétés de notre objet ?

3.1 Utiliser des getters et setters à notre classe

4 Conclusion

Dans le chapitre précédent, nous avons vu comment travailler avec les événements en javascript. Dans ce chapitre, nous allons nous intéresser aux classes et aux objets en javascript.

Il est important de comprendre les classes et les objets en javascript car ils permettent de créer des structures de données plus complexes et de mieux organiser votre code. Avant de découvrir les classes et les objets en javascript, il est recommandé de connaître les bases de la programmation orientée objet.

Qu'est-ce qu'une classe en javascript ?

Une classe est un modèle qui peut être utilisé pour créer des objets. Elle définit les propriétés et les méthodes que possèderont ces objets. En utilisant des classes, vous pouvez créer plusieurs objets qui partagent les mêmes propriétés et méthodes, ce qui peut être très pratique dans de nombreux cas.

Déclaration d'une classe

Pour créer une classe en javascript, vous pouvez utiliser la syntaxe suivante :

class MaClasse {
  // Constructeur de la classe
  constructor() {
    // Initialisation des propriétés et méthodes de la classe
  }

  // Méthodes de la classe
  maMethode() {
    // Code de la méthode
  }
}

Constructeur et méthodes d'une classe

La définition d’une classe en javascript inclut le constructeur de la classe, qui est une méthode spéciale utilisée pour créer et initialiser un objet créé à partir de cette classe.

Le constructeur d’une classe est défini en utilisant le mot-clé « constructor » . Par exemple :

// Constructeur de la classe
constructor() {
// Initialisation des propriétés et méthodes de la classe
}

Les méthodes d’une classe sont définies de la même manière que les fonctions, à l’exception du mot-clé « function » qui n’est pas utilisé.

// Méthodes de la classe
maMethode() {
 // Code de la méthode
}

Vous pouvez accéder aux méthodes d’un objet de la même manière que les propriétés, en utilisant la syntaxe suivante : monObjet.maMethode();

const monObjet = new MaClasse();
monObjet.maMethode();

Héritage avec les classes

L’héritage est un concept clé en programmation orientée objet (POO). Il consiste à créer une nouvelle classe à partir d’une classe existante en en héritant les propriétés et les méthodes. Cela permet de réutiliser du code et de faciliter l’organisation de votre application.

En javascript, il est possible d’utiliser l’héritage avec les classes grâce à la syntaxe « extends ». Voici un exemple de création d’une classe « Enfant » qui hérite d’une classe « Parent » :

class Parent {
  constructor(nom) {
    this.nom = nom;
  }

  saluer() {
    console.log(Bonjour, je suis ${this.nom});
  }
}

class Enfant extends Parent {
  constructor(nom, age) {
    super(nom);
    this.age = age;
  }
}

const enfant1 = new Enfant('Marie', 7);
enfant1.saluer(); // Bonjour, je suis Marie

Utilisation de la méthode super

La méthode super est utilisée pour appeler une méthode d’une classe parente depuis une classe enfant. Par exemple, si vous avez une classe Animal avec une méthode « move() » qui définit comment les animaux se déplacent, et que vous avez une classe Chat qui hérite de la classe Animal, vous pouvez utiliser la méthode super pour appeler la méthode « move() » de la classe Animal depuis la classe Chat. Voici un exemple de code :

class Animal {
  move() {
    console.log('Je me déplace');
  }
}

class Chat extends Animal {
  move() {
    console.log('Je me déplace en sautant');
    super.move();
  }
}

const monChat = new Chat();
monChat.move(); 
// affiche "Je me déplace en sautant" puis "Je me déplace"

Méthodes statiques

Les méthodes statiques sont des méthodes qui appartiennent à la classe elle-même et non à ses instances. Elles peuvent être appelées sans avoir à instancier la classe. Par exemple, vous pouvez définir une méthode statique « getAnimalType() » dans la classe Animal qui retourne le type d’animal. Voici un exemple de code :

class Animal {
  static getAnimalType() {
    return 'Animal';
  }
}

console.log(Animal.getAnimalType()); // affiche "Animal"

Les méthodes statiques ne peuvent pas être appelées sur des instances de la classe. Par exemple, si vous essayez d’appeler la méthode « getAnimalType() » sur une instance de la classe Animal, vous obtiendrez une erreur.

Comment manipuler les propriétés de notre objet ?

Vous pouvez également passer des paramètres au constructeur de la classe pour initialiser des propriétés de l’objet :

class MaClasse {
  constructor(param1, param2) {
    this.param1 = param1;
    this.param2 = param2;
  }
}
const monObjet = new MaClasse("Valeur de param1", "Valeur de param2");

Pour accéder à une propriété d’un objet, vous pouvez utiliser la syntaxe suivante :

monObjet.maPropriete;

Pour modifier une propriété d’un objet, vous pouvez utiliser la syntaxe suivante :

monObjet.maPropriete = "Nouvelle valeur";

Pour supprimer une propriété d’un objet, vous pouvez utiliser la méthode « delete » comme ceci :

delete monObjet.maPropriete;

Vous ne pouvez pas supprimer une propriété d’un objet s’il s’agit d’une propriété définie sur le prototype de l’objet. Pour savoir comment gérer les propriétés héritées, consultez la section suivante sur l’héritage avec les objets.

Utiliser des getters et setters à notre classe

Les getters et setters sont des méthodes qui permettent de récupérer et de modifier les propriétés d’un objet de manière contrôlée. Ils sont souvent utilisés lorsque vous voulez ajouter une logique spécifique lors de la récupération ou de la modification d’une propriété.

Voici un exemple d’utilisation de getters et setters dans une classe :

class MonObjet {
  constructor(propriete) {
    this._propriete = propriete;
  }

  // Getter
  get propriete() {
    return this._propriete;
  }

  // Setter
  set propriete(value) {
    this._propriete = value;
  }
}

const objet = new MonObjet('valeur initiale');
console.log(objet.propriete); // affiche 'valeur initiale'

objet.propriete = 'nouvelle valeur';
console.log(objet.propriete); // affiche 'nouvelle valeur'

Les getters et setters sont des méthodes, et non des propriétés. Vous devez donc utiliser la syntaxe objet.propriete() pour accéder à leur valeur, plutôt que objet.propriete (sans parenthèses).

Dans l’exemple ci-dessus, nous avons utilisé un getter pour récupérer la valeur de la propriété _propriete, et un setter pour la modifier. Nous avons également défini une propriété _propriete en utilisant le mot-clé this dans le constructeur de la classe. Cette propriété est privée et ne peut être modifiée que via les getters et setters.

Recommendation Il est recommandé d'utiliser des getters et des setters lorsque vous souhaitez effectuer des opérations supplémentaires lors de la lecture ou de la modification de la valeur d'une propriété. Par exemple, vous pouvez utiliser un setter pour vérifier que la valeur passée est valide avant de l'affecter à la propriété. Voici un exemple d'utilisation de getters et de setters dans une classe :

class MonObjet {
  constructor(valeur) {
    this._maPropriete = valeur;
  }

  get maPropriete() {
    return this._maPropriete;
  }

  set maPropriete(valeur) {
    if (typeof valeur === 'string') {
      this._maPropriete = valeur;
    } else {
      console.log('La valeur doit être une chaîne de caractères');
    }
  }
}

const monObj = new MonObjet('ma valeur');
console.log(monObj.maPropriete); // Affiche 'ma valeur'
monObj.maPropriete = 42; // Affiche 'La valeur

Conclusion

Nous avons vu comment utiliser les classes et les objets en Javascript afin de structurer et organiser notre code de manière plus efficace puis comment créer et manipuler des objets à partir de classes en utilisant le constructeur et les méthodes. Nous avons également abordé l’héritage avec les classes en utilisant la méthode super et les méthodes statiques. Enfin, nous avons évoqué les getters et setters qui permettent de contrôler l’accès et la modification des propriétés d’un objet.

Dans le chapitre suivant, nous allons voir comment gérer les erreurs et déboguer notre code en utilisant les try-catch et les outils de débogage de notre navigateur. Cela nous permettra de mieux comprendre ce qui se passe dans notre code et de le corriger si nécessaire.