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 Element {
2
  constructor(prop1, prop2) {
3
    this.prop1 = prop1;
4
    this.prop2 = prop2;
5
  }
6
  meth1() {...}
7
}
8
9
const enfant = new Element("valeur1", "valeur2");
Class
On aurait pu créer cet objet de cette façon :
1
const Element = function(prop1, prop2){
2
  this.prop1 = prop1;
3
  this.prop2 = prop2;
4
}
5
Element.prototype.meth1 = function() {...}
6
7
const enfant = new Element("valeur1", "valeur2");
MéthodePropriété et méthode static
Création d'une méthode static
1
class Element {
2
  constructor(prop1, prop2) {
3
    this.prop1 = prop1;
4
    this.prop2 = prop2;
5
  }
6
  static meth1() {...}
7
}
8
9
const enfant = new Element("valeur1", "valeur2");
10
Element.meth1(); 
meth1 est une méthode static. C'est une méthode de classe.
Méthode static
On aurait pu créer cet objet de cette façon :
1
const Element = function(prop1, prop2){
2
  this.prop1 = prop1;
3
  this.prop2 = prop2;
4
}
5
Element.meth1 = function() {...}
6
7
const enfant = new Element("valeur1", "valeur2");
Création d'une propriété static
1
class Element {
2
  static prop = 0;
3
  constructor(value) {
4
    this.value = value;
5
    Element.prop++;
6
  }
7
}
8
9
const enfant1 = new Element(10);
10
const enfant2 = new Element(20);
11
const enfant3 = new Element(30);
12
console.log(Element.prop); // 3
prop est une propriété static. C'est une propriété de la classe.
Sa valeur augmente de 1 à chaque nouvelle instance.
MéthodeHéritage
Création d'héritage de class avec le mot-clé extends.
1
class Element {
2
  constructor(prop1, prop2) {
3
    this.prop1 = prop1;
4
    this.prop2 = prop2;
5
  }
6
}
7
class Enfant extends Element {
8
  constructor(prop) {
9
    super(prop, prop);
10
  }
11
}
12
13
const petitEnfant = new Enfant("valeur1");
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(...).
Class extends
On aurait pu créer cet objet de cette façon :
1
const Element = function(prop1, prop2){
2
  this.prop1 = prop1;
3
  this.prop2 = prop2;
4
}
5
const Enfant = function(prop){
6
  Element.call(this,prop, prop);
7
}
8
Object.setPrototypeOf(Enfant.prototype,  Element.prototype);
9
10
const petitEnfant = new Enfant("valeur1");
MéthodeExemple
1
class Article {
2
  valeur = 0;
3
  constructor(nom, prix) {
4
    this.nom = nom;
5
    this.prix = prix;
6
    Article.nombreArticles++;
7
  }
8
  get prix() {
9
    return this.valeur + "€";
10
  }
11
  set prix(prix) {
12
    this.valeur = parseFloat(prix);
13
  }
14
  static get nombreArticles(){
15
    return this._nb || 0;
16
  }
17
  static set nombreArticles(nb){
18
    this._nb = nb;
19
  }
20
}
21
22
const art1 = new Article("art1", "12€");
23
const art2 = new Article("art2", "12.5€");
24
const art3 = new Article("art3", "1.8€");
25
console.log(Article.nombreArticles); // Affiche dans la console 3
26
Class Article
Vérifiez les propriétés de vos objets :
Propriété nom de art1 :
1
Object.getOwnPropertyDescriptor(art1, 'nom')
1
{value: 'art1', writable: true, enumerable: true, configurable: true}
Propriété prix du prototype de art1 :
1
Object.getOwnPropertyDescriptor(art1.__proto__, 'prix')
1
{enumerable: false, configurable: true, get: ƒ, set: ƒ}
Propriété nombreArticles de la classe Article :
1
Object.getOwnPropertyDescriptor(art1.__proto__.constructor, 'nombreArticles')
ou en passant par art1
1
Object.getOwnPropertyDescriptor(Article, 'nombreArticles')
1
{enumerable: false, configurable: true, get: ƒ, set: ƒ}
DéfinitionPropriété et méthode de classe privées
Une proposition expérimentale de rendre les propriétés et les méthodes privés existe sur certaines versions de navigateurs (12/11/2022).
Il suffit de les faire précéder du symbole #.
1
class Article {
2
  #valeur = 0;
3
  constructor(nom, prix) {
4
    this.nom = nom;
5
    this.prix = prix;
6
    Article.nombreArticles++;
7
  }
8
  get prix() {
9
    return this.#valeur + "€";
10
  }
11
  set prix(prix) {
12
    this.#valeur = parseFloat(prix);
13
  }
14
  static get nombreArticles(){
15
    return this._nb || 0;
16
  }
17
  static set nombreArticles(nb){
18
    this._nb = nb;
19
  }
20
}
21
22
const art1 = new Article("art1", "12€");
23
24
L'utilisation de l'élément privé à l’extérieur de la classe déclenche une erreur de syntaxe.
1
console.log(art1.#valeur);
1
Uncaught SyntaxError: Private field '#valeur' must be declared in an enclosing class