Classes

Dfinir des classes

En ralit, les classes sont juste des fonctions spciales. Ainsi, les classes sont dfinies de la mme faon que les fonctions : par dclaration, ou par expression.

Les dclarations de classes

Pour utiliser une dclaration de classe simple, on utilisera le mot-cl class, suivi par le nom de la classe que l'on dclare (ici  Rectangle ).

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}

Remonte des dclarations (hoisting)

Les dclarations de fonctions sont remontes dans le code. En revanche, ce n'est pas le cas pour les dclarations de classes. Ainsi, il est ncessaire de dclarer la classe avant de l'instancier. Dans le cas contraire, on obtient une ReferenceError :

const p = new Rectangle(); // ReferenceError

class Rectangle {}

Les expressions de classes

Il est possible d'utiliser des expressions de classes, nommes ou anonymes. Si on utilise un nom dans l'expression, ce nom ne sera accessible que depuis le corps de la classe via la proprit name (cette valeur ne sera pas directement accessible pour les instances).

// anonyme
let Rectangle = class {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
};

// nomme
let Rectangle = class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
};

Corps d'une classe et dfinition des mthodes

Le corps d'une classe est la partie contenue entre les accolades. C'est dans cette partie que l'on dfinit les proprits d'une classe comme ses mthodes et son constructeur.

Mode strict

Le corps des classes, pour les expressions et pour les dclarations de classes, est excut en mode strict (autrement dit, le constructeur, les mthodes statiques, le prototype, les accesseurs (getters) et mutateurs (setters) sont excuts en mode strict).

Constructeur

La mthode constructor est une mthode spciale qui permet de crer et d'initialiser les objet crs avec une classe. Il ne peut y avoir qu'une seule mthode avec le nom "constructor" pour une classe donne. Si la classe contient plusieurs occurences d'une mthode constructor, cela provoquera une exception SyntaxError.

Le constructeur ainsi dclar peut utiliser le mot-cl super afin d'appeler le constructeur de la classe parente.

Mthodes de prototype

Voir aussi les dfinitions de mthode.

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }

  get area() {
    return this.calcArea();
  }

  calcArea() {
    return this.largeur * this.hauteur;
  }
}

const carr = new Rectangle(10, 10);

console.log(carr.area);

Mthodes statiques

Le mot-cl static permet de dfinir une mthode statique pour une classe. Les mthodes statiques sont appeles par rapport la classe entire et non par rapport une instance donne (ces mthodes ne peuvent pas tre appeles depuis une instance). Ces mthodes sont gnralement utilises sous formes d'utilitaires au sein d'applications.

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  static distance(a, b) {
    const dx = a.x - b.x;
    const dy = a.y - b.y;
    return Math.hypot(dx, dy);
  }
}

const p1 = new Point(5, 5);
const p2 = new Point(10, 10);

console.log(Point.distance(p1, p2));

Gestion de this pour le prototype et les mthodes statiques

Lorsqu'une mthode statique ou une mthode lie au prototype est appele sans valeur this, celle-ci vaudra undefined au sein de la fonction. Il n'y aura pas d'autodtermination de this (autoboxing en anglais). On aura le mme rsultat si on invoque ces fonctions dans du code non-strict car les fonctions lies aux classes sont excutes en mode strict.

class Animal {
  crie() {
    return this;
  }
  static mange() {
    return this;
  }
}

let obj = new Animal();
obj.crie(); // Animal {}
let crie = obj.crie;
crie(); // undefined

Animal.mange(); // class Animal
let mange = Animal.mange;
mange(); // undefined

Si on crit le code avec des fonctions traditionnelles plutt qu'avec des classes et qu'on utilise le mode non-strict, l'autodtermination de this sera faite en fonction du contexte dans lequel la fonction a t appele. Si la valeur initiale est undefined, this correspondra l'objet global.

L'autodtermination de this n'a pas lieu en mode strict, la valeur this est passe telle quelle.

function Animal() {}

Animal.prototype.crie = function () {
  return this;
};

Animal.mange = function () {
  return this;
};

let obj = new Animal();
let crie = obj.crie;
crie(); // l'objet global

let mange = Animal.mange;
mange(); // l'objet global

Proprits des instances

Les proprits des instances doivent tre dfinies dans les mthodes de la classe :

class Rectangle {
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}

Les proprits statiques ou les donnes relatives au prototype doivent tre dfinies en dehors de la dclaration comportant le corps de la classe :

Rectangle.largeurStatique = 20;
Rectangle.prototype.largeurProto = 25;

Dclarations de champs

Dclarations de champs publics

En utilisant la syntaxe pour la dclaration des champs, on peut rcrire l'exemple prcdent de la faon suivante :

class Rectangle {
  hauteur = 0;
  largeur;
  constructor(hauteur, largeur) {
    this.hauteur = hauteur;
    this.largeur = largeur;
  }
}

En dclarant les champs en pralable, il est plus facile de comprendre la classe dans son ensemble. De plus, on s'assure que les champs soient toujours prsents.

Comme on peut le voir dans cet exemple, les champs peuvent ventuellement tre dclars avec une valeur par dfaut.

Dclarations de champs privs

En utilisant des champs privs, on peut revoir la dfinition de la faon suivante :

class Rectangle {
  #hauteur = 0;
  #largeur;
  constructor(hauteur, largeur) {
    this.#hauteur = hauteur;
    this.#largeur = largeur;
  }
}

Si on utilise les champs privs hors de la classe, cela gnrera une erreur. Ces champs ne peuvent tre lus ou modifis que depuis le corps de la classe. En vitant d'exposer des lments l'extrieur, on s'assure que les portions de code qui consomment cette classe n'utilise pas ses dtails internes et on peut alors maintenir la classe dans son ensemble et modifier les dtails internes si besoin.

Il n'est pas possible de crer des champs privs a posteriori au moment o on leur affecterait une valeur. Autrement dit, il est possible de dclarer une variable normale au moment voulu lorsqu'on lui affecte une valeur tandis que pour les champs privs, ces derniers doivent tre dclars (ventuellement initialiss) en amont, au dbut du corps de la classe.

Crer une sous-classe avec extends

Le mot-cl extends, utilis dans les dclarations ou les expressions de classes, permet de crer une classe qui hrite d'une autre classe (on parle aussi de sous-classe ou de classe-fille ).

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

  parle() {
    console.log(`${this.nom} fait du bruit.`);
  }
}

class Chien extends Animal {
  constructor(nom) {
    super(nom); // appelle le constructeur parent avec le paramtre
  }
  parle() {
    console.log(`${this.nom} aboie.`);
  }
}

Si on dclare un constructeur dans une classe fille, on doit utiliser super() avant this.

On peut galement tendre des classes plus traditionnelles bases sur des constructeurs fonctionnels :

function Animal(nom) {
  this.nom = nom;
}
Animal.prototype.crie = function () {
  console.log(`${this.nom} fait du bruit.`);
};

class Chien extends Animal {
  crie() {
    super.crie();
    console.log(`${this.nom} aboie.`);
  }
}

let c = new Chien("Ida");
c.crie();
// Ida fait du bruit.
// Ida aboie.

En revanche, les classes ne permettent pas d'tendre des objets classiques non-constructibles. Si on souhaite crer un lien d'hritage en un objet et une classe, on utilisera Object.setPrototypeOf() :

const Animal = {
  crie() {
    console.log(`${this.nom} fait du bruit.`);
  },
};

class Chien {
  constructor(nom) {
    this.nom = nom;
  }
  crie() {
    super.crie();
    console.log(`${this.nom} aboie.`);
  }
}
Object.setPrototypeOf(Chien.prototype, Animal);

let d = new Chien("Ida");
d.crie();
// Ida fait du bruit
// Ida aboie.

Le symbole species

Lorsqu'on souhaite renvoyer des objets Array avec une sous-classe MonArray, on peut utiliser symbole species pour surcharger le constructeur par dfaut.

Par exemple, si, lorsqu'on utilise des mthodes comme map() qui renvoient le constructeur par dfaut et qu'on veut qu'elles renvoient Array plutt que MonArray, on utilisera Symbol.species :

class MonArray extends Array {
  // On surcharge species
  // avec le constructeur Array du parent
  static get [Symbol.species]() {
    return Array;
  }
}
let a = new MonArray(1, 2, 3);
let mapped = a.map((x) => x * x);

console.log(mapped instanceof MonArray); // false
console.log(mapped instanceof Array); // true

Utiliser super pour la classe parente

Le mot-cl super est utilis pour appeler les fonctions rattaches un objet parent.

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

  parler() {
    console.log(`${this.nom} fait du bruit.`);
  }
}

class Lion extends Chat {
  parler() {
    super.parler();
    console.log(`${this.nom} rugit.`);
  }
}

Les mix-ins

Les sous-classes abstraites ou mix-ins sont des modles (templates) pour des classes. Une classe ECMAScript ne peut avoir qu'une seule classe parente et il n'est donc pas possible, par exemple, d'hriter de plusieurs classes dont une classe abstraite. La fonctionnalit dont on souhaite disposer doit tre fournie par la classe parente.

Une fonction peut prendre une classe parente en entre et renvoyer une classe fille qui tend cette classe parente. Cela peut permettre d'muler les mix-ins avec ECMAScript.

let calculetteMixin = (Base) =>
  class extends Base {
    calc() {}
  };

let aleatoireMixin = (Base) =>
  class extends Base {
    randomiseur() {}
  };

Une classe utilisant ces mix-ins peut alors tre crite de cette faon :

class Toto {}
class Truc extends calculetteMixin(aleatoireMixin(Toto)) {}

Spcifications

Compatibilit des navigateurs

Utilisation via l'diteur multiligne dans Firefox

Une classe ne peut pas tre redfinie. Si vous testez votre code via l'diteur multiligne JavaScript de Firefox (Outils > Dveloppement web > Editeur multiligne JavaScript) et que vous excutez plusieurs reprises votre code avec la dfinition d'une classe, vous obtiendrez une exception SyntaxError : redeclaration of let <class-name>.

Pour relancer une dfinition, il faut utiliser le menu Excuter > Recharger et excuter. ce sujet, voir le bug Firefox 1428672.

Voir aussi

• Les fonctions
• Les dclarations de classes
• Les expressions de classes
• super
• Billet sur les classes (traduction en franais)
• Champs publics et privs pour les classes (proposition de niveau 3)