Class

Afin de simplifier la programmation des objets ECMAScript 2015 a introduit le mot-clé class. Ce n'est qu'un sucre syntaxique qui permet de générer plus facilement des objets ainsi que leur héritage.

MéthodeCréation

Le mot-clé class permet de créer ce nouveau type de constructeur.

1
class Identite {
2
  nom       // les propriétés peuvent être déclarées ou pas
3
  prenom    // elles peuvent être initialisées
4
  constructor(nom, prenom) {
5
    this.nom = nom;
6
    this.prenom = prenom;
7
  }
8
  afficher() {return `${this.nom} ${this.prenom}`}
9
}
10
11
const personne = new Identite("Dupont", "pierre");
12
console.log(personne.afficher()); // 'Dupont pierre'
Classe
On aurait pu créer cet objet de cette façon :
1
const Identite = function(nom, prenom){
2
  this.nom = nom;
3
  this.prenom = prenom;
4
}
5
Identite.prototype.afficher = function() {return `${this.nom} ${this.prenom}`}
6
7
const personne = new Identite("Dupont", "pierre");
DéfinitionPropriété et méthode de classe privées
Les propriétés et les méthodes de classe privées sont des propriétés et des méthodes qui ne peuvent être appelées qu'à l'intérieur de la classe.
Il faut les faire précédées du symbole # pour qu'elles deviennent privées. Le symbole # fait partie du nom.
1
class Identite {
2
  #nom = ""      // les propriétés privées doivent être déclarées
3
  #prenom = ""   // elles peuvent être initialisées
4
  constructor(nom, prenom) {
5
    this.#nom = nom;
6
    this.#prenom = prenom;
7
  }
8
  #nomMajuscule() {return this.#nom.toUpperCase()}
9
  
10
  afficher() {return `${this.#nomMajuscule()} ${this.#prenom}`}
11
}
12
13
const personne = new Identite("Dupont", "pierre");
14
console.log(personne.afficher()); // 'DUPONT pierre'
15
console.log(personne.#nom);       // Uncaught SyntaxError: Private field '#nom' must be declared in an enclosing class
16
console.log(personne.#nomMajuscule()); // Uncaught SyntaxError: Private field '#nomMajuscule' must be declared in an enclosing class
L'utilisation de l'élément privé à l’extérieur de la classe déclenche une erreur de syntaxe.
MéthodePropriété et méthode static
Création d'une propriété static
Les propriétés static de classe sont des propriétés qui ne peuvent être appelées que par la classe elle-même.
1
class Identite {
2
  static nb = 0
3
  constructor() {
4
    Identite.nb++;
5
  }
6
}
7
8
const personne1 = new Identite("dupont", "jean");
9
const personne2 = new Identite("dupuis", "pierre");
10
console.log(Identite.nb);            // 2
11
console.log(personne1.nb);           // undefined
12
Création d'une méthode static
Les méthodes static de classe sont des méthodes qui ne peuvent être appelées que par la classe elle-même.
1
class Identite {
2
  static nb = 0
3
  constructor() {
4
    Identite.nb++;
5
  }
6
  static instances() {return `${this.nb} identités`}
7
}
8
9
const personne1 = new Identite("dupont", "jean");
10
const personne2 = new Identite("dupuis", "pierre");
11
console.log(Identite.instances());   // 2
12
console.log(personne1.instances());   // Uncaught TypeError: personne1.instances is not a function
Propriété et méthode static
MéthodeHéritage
Création d'héritage de class avec le mot-clé extends.
1
class Identite {
2
  constructor(nom, prenom) {
3
    this.nom = nom;
4
    this.prenom = prenom;
5
  }
6
  afficher() {return `${this.nom} ${this.prenom}`}
7
}
8
9
class Eleve extends Identite {
10
  constructor(nom, prenom, formation) {
11
    super(nom, prenom);
12
    this.formation = formation;
13
  }
14
  afficher() {return `${super.afficher()} ${this.formation}`}
15
}
16
17
const eleve = new Eleve("Dupont", "jean", "Deust WMI");
super représente la classe parente.
Pour appeler la méthode constructor de la classe parente on écrit super(...).
Pour appeler la méthode meth(...) de la classe parente on écrit super.meth(...).
Héritage de classe
MéthodeGetter Setter
Utilisation des setters et des getters avec les propriétés privées.
1
class Identite {
2
    #nom
3
    #prenom
4
    constructor(nom, prenom) {
5
        this.nom = nom;         // utilise le set nom
6
        this.prenom = prenom;   // utilise le set prenom
7
    }
8
    get nom() { return this.#nom.toUpperCase() }
9
    set nom(nom) { this.#nom = nom.replace(/[^a-z]/ig, '') }  // garde seulement les lettres
10
    get prenom() { return this.#prenom.toLowerCase() }        // retourne en majuscules
11
    set prenom(prenom) { this.#prenom = prenom.replace(/[^a-z]/ig, '') }
12
    afficher() { return `${this.nom} ${this.prenom}` }        // utilise les setters
13
}
14
15
const personne = new Identite("Du4po7nt", "jE4aN");
16
17
console.log(personne);            // {#nom: 'Dupont', #prenom: 'jEaN'}
18
console.log(personne.afficher()); // 'DUPONT jean'
19
console.log(personne.#nom);       // Uncaught SyntaxError: Private field '#nom' 
20
                                  // must be declared in an enclosing class
21