Les classes en javacript: création, fonctionnement et héritage

Imaginez vous souhaitez créer un jeu avec des animaux et leur attribuer des capacités. Vous pourriez faire quelque chose comme ceci:

const Chien = {
  nom: 'chien',
  marcher: function() {
    console.log('Marche');
  }};

 const Chat = {   nom: 'chat',   marcher: function() {     console.log('Marche');   } };

const ChatPersan = {   nom: 'chat persan',   marcher: function() {     console.log('Marche');   } };

Et ainsi de suite. Néanmoins, vous voyez bien que vous allez beaucoup vous répéter et que ce n’est pas lisible. Pour répondre à ce problème il y avait les prototypes. Néanmoins, la syntaxe manque de lisibilité et s’éloigne des langages de programmation orientée objet (POO) traditionnels.

C’est pour cela que l’ECMAScript 6 (ES6) a introduit les classes en javascript.

Comment créer une classe ?

Une classe est déclarée avec le mot-clé class suivi du nom de la classe. Par exemple:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  haveBirthday() {
    this.age += 1;
  }
}

Le fonctionnement des classes

Une fois que vous avez créé une classe, vous pouvez en créer des instances qui partageront des caractéristiques. Par exemple, en continuant l’exemple:

const Jacques = new Person (Jacques, 42);
Jacques.haveBirthday()
console.log(Jacques.age) // renvoie 43

Cela a de nombreux atouts, comme rendre le code plus lisible et modulaire.

Extension d’une classe

Il est possible de coder des classes enfants (on parle d’étendre une classe et d’héritage) très facilement, grâce au mot-clé « extends« . Par exemple, ici, la classe « Employee » étend la classe « Person »

class Employee extends Person {
  constructor(name, age, position) {
    super(name, age);
    this.position = position;
  }

  work() {
    console.log("Travaille");
  }
}

const emily = new Employee('Emily', 25, 'developer');
emily.work(); // Output: "Emily is working as a developer"

Nous avons en même temps utilisé « super ». Cela permet d’accéder au constructeur et aux méthodes (qui peuvent avoir été écrasées par la classe enfant) de l’élément parent.

Quelle différence avec les prototypes ?

Les classes sont en fait du « sucre syntaxique »: elles sont transformées par le moteur javascript en prototypes. Elles ont été créées pour rendre le code plus simple à lire et rapprocher l’écriture de javascript des autres langages de programmation orientée objet (POO).