Constructeurs et super dans les classes ES6

Concept de base des classes ES6

Les classes en ES6 représentent une forme de sucre syntaxique pour implémenter l'héritage prototypal traditionnel de JavaScript. Elles offrent une syntaxe plus claire tout en conservant les mécanismes fondamentaux d'ECMAScript 5.

Constructeur par défaut


// Syntaxe ES5 traditionnelle
function Rectangle(largeur, hauteur) {
    this.largeur = largeur;
    this.hauteur = hauteur;
}

Rectangle.prototype.obtenirDimensions = function() {
    return `L:${this.largeur}, H:${this.hauteur}`;
};

// Équivalent ES6
class Rectangle {
    constructor(largeur, hauteur) {
        this.largeur = largeur;
        this.hauteur = hauteur;
    }

    obtenirDimensions() {
        return `L:${this.largeur}, H:${this.hauteur}`;
    }
}

Caractéristiques clés du constructeur :

  1. Appel automatique lors de l'instanciation via new
  2. Un constructeur par défaut est toujours présent, même non déclaré
  3. Peut retourner un objeet personnalisé au lieu de this

Mécanisme de super

Le mot-clé super permet d'accéder aux propriétés et méthodes de la classe parente. Deux modes d'utilisation principaux :

Appel du constructeur parent

class Forme {
    constructor() {
        console.log("Initialisation Forme");
    }
}

class Cercle extends Forme {
    constructor(rayon) {
        super();  // Obligatoire dans les sous-classes
        this.rayon = rayon;
    }
}

Points critiques :

  • Obligation d'appeler super() avant d'utiliser this
  • super() retourne l'instance de la sous-classe
  • Le contexte this à l'intérieur de super() fait référence à la sous-classe
Accès aux méthodes parentes

class Figure {
    calculerAire() {
        return 0;
    }
}

class Carre extends Figure {
    constructor(cote) {
        super();
        this.cote = cote;
    }

    calculerAire() {
        // Appel de la méthode parente
        console.log("Méthode parente:", super.calculerAire());
        return this.cote ** 2;
    }
}

Comportements spécifiques :

  • Dans les méthodes normales, super référence Prototype de la classe parente
  • Le contexte this reste lié à la sous-classe lors des appels via super
  • Les assignations via super affectent directement this de la sous-classe

Contraintes et bonnes pratiques

  • super doit être utilisé explicitement soit comme fonction, soit comme objet
  • Les sous-classes doivent toujours appeler super() dans leur constructeur
  • Le mot-clé new.target dans super() référence toujours la sous-classe appelante

Étiquettes: JavaScript ES6 classes Héritage super

Publié le 9 octobre à 12h58