Les classes en JavaScript

Les classes en JavaScript
Mise à jours du 10 Janvier 2023
Si vous cherchez un tutoriel sur le Javascript avec notamment des classes Javascript, vous pourriez être intéressez par mon nouveau tutoriel sur le Javascript.

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 d’une classe

javascript
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

javascript
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}`); 
    }
}

const 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

javascript
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}`); 
    }
}

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

Pour créer un héritage de classe, utilisez 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.

JavaScript

Damien Flandrin Développeur web depuis 2010, créateur de Gekkode et d’Email Impact. Chaque article est testé sur un projet réel avant publication. Contact
Newsletter

Les nouveaux tests, tutoriels et projets, par e-mail.

Tests reproductibles, code versionné, résultats datés. Jamais de spam.