Les classes en JavaScript

Cet article explique les classes en JavaScript.

YouTube Video

Les classes en JavaScript

En JavaScript, une classe intègre le concept de la programmation orientée objet et sert de modèle pour les objets. Avec les classes, vous pouvez définir de manière concise les propriétés et les méthodes d’un objet, améliorant ainsi leur réutilisabilité et l’organisation du code. La syntaxe des classes a été introduite en JavaScript avec ES6.

Définition de classe

Une classe est définie avec le mot-clé class et est généralement initialisée avec une méthode appelée constructeur.

 1class Person {
 2    // Constructor method (called when the class is instantiated)
 3    constructor(name, age) {
 4        this.name = name; // Property definition
 5        this.age = age;
 6    }
 7
 8    // Method definition
 9    greet() {
10        return `Hello, my name is ${this.name}`;
11    }
12}
13
14// Instantiation of the class
15const alice = new Person("Alice", 25);
16console.log(alice.greet()); // Hello, my name is Alice

• Nous définissons une classe avec class Person.
• Le constructor est une méthode spéciale qui est automatiquement appelée lorsqu’un objet est créé.
• Le mot-clé this fait référence à l’instance (objet) de la classe au sein de la classe.

Propriétés et méthodes de classe

Une classe peut définir des propriétés et des méthodes. Les propriétés représentent les attributs d’un objet, et les méthodes représentent les fonctions qu’il possède.

 1class Car {
 2    constructor(brand, model) {
 3        this.brand = brand;
 4        this.model = model;
 5    }
 6
 7    // Method definition
 8    drive() {
 9        console.log(`Driving a ${this.brand} ${this.model}`);
10    }
11}
12
13const car1 = new Car("Toyota", "Corolla");
14car1.drive(); // Driving a Toyota Corolla

Dans cet exemple, une classe Car est déclarée avec les propriétés brand et model ainsi qu’une méthode drive.

Héritage de classe

Les classes peuvent hériter d’autres classes. En utilisant l’héritage, vous pouvez créer une nouvelle classe basée sur une classe existante et lui ajouter des fonctionnalités supplémentaires.

 1class Animal {
 2    constructor(name) {
 3        this.name = name;
 4    }
 5
 6    speak() {
 7        console.log(`${this.name} makes a noise`);
 8    }
 9}
10
11// Inherit from the Animal class
12class Dog extends Animal {
13    constructor(name, breed) {
14        super(name); // Call the constructor of the parent class (Animal)
15        this.breed = breed;
16    }
17
18    // Override the method
19    speak() {
20        console.log(`${this.name} barks`);
21    }
22}
23
24const dog = new Dog("Rex", "German Shepherd");
25dog.speak(); // Rex barks

Dans cet exemple, la classe Dog hérite de la classe Animal.

• Le mot-clé extends est utilisé pour hériter de la classe Animal.
• Dans le constructeur de la classe Dog, super() est utilisé pour appeler le constructeur de la classe parente. Cela vous permet d’hériter du processus d’initialisation de la classe parente.
• Dans la classe héritée, vous pouvez redéfinir les méthodes de la classe parente. Dans cet exemple, au lieu de "Rex fait du bruit", "Rex aboie" est affiché.

Méthodes Statiques

Lorsque vous définissez une méthode statique dans une classe, la méthode est associée à la classe elle-même. Les méthodes statiques peuvent être appelées sans être instanciées.

1class MathUtils {
2    // Static method
3    static add(a, b) {
4        return a + b;
5    }
6}
7
8console.log(MathUtils.add(5, 10)); // 15

Dans cet exemple, la classe MathUtils possède une méthode statique add définie.

• Le mot clé static est utilisé pour définir une méthode statique.
• Les méthodes statiques n'appartiennent pas aux instances de classe et peuvent être appelées directement depuis la classe elle-même.

Accesseurs et Mutateurs (Getters et Setters)

En définissant des accesseurs (getters) et des mutateurs (setters) dans une classe, vous pouvez encapsuler la récupération et la modification des propriétés.

 1class Rectangle {
 2    constructor(width, height) {
 3        this.width = width;
 4        this.height = height;
 5    }
 6
 7    // Getter
 8    get area() {
 9        return this.width * this.height;
10    }
11
12    // Setter
13    set widthValue(newWidth) {
14        this.width = newWidth;
15    }
16}
17
18const rect = new Rectangle(10, 20);
19console.log(rect.area); // 200
20
21rect.widthValue = 15;
22console.log(rect.area); // 300

Dans cet exemple, la classe Rectangle définit un accesseur area et un mutateur widthValue.

• Un accesseur (get) est appelé lorsqu'on récupère la valeur d'une propriété.
• Un mutateur (set) est appelé lorsqu'on met à jour la valeur d'une propriété.

Syntaxe Simplifiée des Classes

En JavaScript, la syntaxe des classes est implémentée en interne à l'aide de fonctions constructrices et de prototypes. La syntaxe des classes est une simplification syntaxique permettant d'écrire cela de manière plus concise.

 1// Example without using class syntax
 2function Person(name, age) {
 3    this.name = name;
 4    this.age = age;
 5}
 6
 7Person.prototype.greet = function() {
 8    return `Hello, my name is ${this.name}`;
 9};
10
11const person = new Person("Alice", 25);
12console.log(person.greet()); // Hello, my name is Alice

Dans cet exemple, une fonction constructrice Person est définie, et la méthode greet est définie à l'aide d'un prototype.

Gestion de this

Le mot clé this à l'intérieur d'une classe fait référence à l'instance de cette classe. Cependant, lors de l'utilisation de this dans des méthodes de classe, vous devez savoir que son comportement peut varier en fonction du contexte. Des problèmes peuvent survenir en particulier lors de l'utilisation de méthodes comme fonctions de rappel (callback).

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13setTimeout(counter.increment, 1000); // NaN
14// NaN, since this.count is undefined, it becomes NaN after incrementing.

Dans de tels cas, lorsqu'une méthode est transmise comme fonction de rappel à setTimeout, la référence de this peut changer. Pour éviter ce problème, il est recommandé de fixer this à l'aide de la méthode bind ou d'utiliser des fonctions fléchées.

 1class Counter {
 2    constructor() {
 3        this.count = 0;
 4    }
 5
 6    increment() {
 7        this.count++;
 8        console.log(this.count);
 9    }
10}
11
12const counter = new Counter();
13
14// When using bind
15setTimeout(counter.increment.bind(counter), 1000);
16
17// When using an arrow function
18setTimeout(() => counter.increment(), 2000);

Résumé

• Les classes sont utilisées comme modèles pour créer des objets, en définissant des propriétés et des méthodes.
• Vous pouvez utiliser l'héritage pour étendre une classe, en utilisant des concepts orientés objet.
• Les méthodes statiques appartiennent à la classe elle-même et peuvent être utilisées sans créer une instance.
• Vous pouvez encapsuler les propriétés à l'aide des accesseurs (getters) et des mutateurs (setters).
• La syntaxe des classes en JavaScript est une simplification syntaxique et utilise en interne l’héritage basé sur les prototypes.

En utilisant les classes, vous pouvez aborder la programmation orientée objet de manière plus naturelle, et améliorer la réutilisabilité et la maintenabilité du code.

Vous pouvez suivre l'article ci-dessus avec Visual Studio Code sur notre chaîne YouTube. Veuillez également consulter la chaîne YouTube.

YouTube Video