Les classes en JavaScript

Mise à jours du 10 Janvier 2023

Les classes ont été introduites dans l’ECMA2015 de JavaScript. Contrairement aux classes en mode orienté objet, les classes JavaScript sont juste un type spécial de fonctions. Mais au lieu d’utiliser le mot clé « function », nous utilisons le mot « class ». Cela a été introduit en JavaScript pour que la syntaxe ressemble à celle des autres langages orientés objet (java, python, c++).

Définition de

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Pour déclarer une classe, vous utilisez le mot-clé class avec le nom de la classe (Rectangle ici).

Constructor: C’est une méthode spéciale pour initialiser une instance de cette classe. Cela signifie qu’à chaque fois que nous créons une nouvelle instance de la classe, elle invoquera le constructeur.

Méthodes dans une classe

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width; 
    }
    // Méthode prototype
    area() {
        return console.log(`La zone est ${this.height*this.width}`); 
    }
    // Méthode statique
    static display(rect){
        return console.log(`Height: ${rect.height} Width: ${rect.width}`); 
    }
}

rectangle = new Rectangle(5, 4);  // Instancier la classe
rectangle.area(); 
// La zone est 20
Rectangle.display(rectangle); 
// Height: 5 Width: 4 
  • Méthode prototype : area() est une méthode prototype.
  • Méthode statique : display() est une méthode statique.

Méthode Prototype

Une méthode prototype est une méthode qui n’est accessible que lorsque vous créez une instance de la classe. Comme vous pouvez le voir dans l’exemple ci-dessus, vous pouvez voir la méthode prototype (ligne 17) en vous référant au nom de la méthode de l’objet suivi de parenthèses (les paramètres éventuels iraient à l’intérieur des parenthèses).

Méthode statique

Une méthode statique est quelque chose que vous pouvez appeler sans instancier la classe. Les méthodes statiques sont définies sur la classe elle-même, et non sur l’objet. Cela signifie que vous ne pouvez pas appeler de méthode statique sur l’objet(rectangle), mais sur la classe (Rectangle) comme indiqué à la ligne 19.

Héritage

class Car {
    constructor(brand) {
        this.carname = brand; 
    }
    present() {
        return 'c\'est ' + this.carname;  
    }
}

class Model extends Car {
    constructor(brand, model) {
        super(brand); 
        this.model = model; 
    }
    show() {
        return console.log(`${this.present()} ${this.model}`); 
    }
}

mycar = new Model("Ford", "Mustang"); 
mycar.show(); 
// c'est une Ford Mustang

Pour créer un héritage de classe, utilisez la fonction extends le mot-cléextends.

Une classe créée avec un héritage de classe, hérite de toutes les méthodes d’une autre classe. Dans l’exemple ci-dessus, la classe Model hérite de toutes les méthodes de la classe Car.

La propriété super() fait référence à la classe mère. En appelant la méthode super() dans la méthode constructeur, nous appelons la méthode constructeur du parent et nous avons accès aux propriétés et méthodes du parent.
L’héritage est utile pour la réutilisation du code, nous pouvons réutiliser les propriétés et les méthodes d’une classe existante lorsque vous créez une nouvelle classe.

Nouveau Tutoriel

Newsletter

Ne manquez jamais les nouveaux conseils, tutoriels et autres.

Pas de spam, jamais. Nous ne partagerons jamais votre adresse électronique et vous pouvez vous désabonner à tout moment.