L'héritage en JS

tuto optionnel

Ce tutoriel est optionel (c'est le seul). L'objectif de ce cours n'est pas de faire de la programmation objet avancée (on n'a pas le temps). Cependant si vous ressentez le besoin de faire de l'héritage pendant le projet, voici comment cela fonctionne en JS (c'est très proche de ce que vous avez vu en JAVA).

Avec l'introduction d'ECMAScript 2015 (ES6), une syntaxe de classe simple pour l'héritage a été introduite.

// Classe Animal
 class Animal {
    constructor(name) {
      this.name = name;    
    }
    noise () {
      console.log(`I am an animal of type : `)
    }    
  }

// Classe Bird héritant de Animal
class Bird extends Animal {
  constructor(name) {
    super(name); // Appelle le constructeur de Animal
    this.type = 'Bird';   
  }
  noise = () => {
    super.noise();
    console.log(`${this.type}, I tweet `);
  }
}


class Dog extends Animal {
  constructor(name) {
    super(name); // Appelle le constructeur de Animal
    this.type = 'Dog';    
  }
  noise = () => {
    super.noise();
    console.log(`${this.type}, I bark `);
  }
}

let labrador = new Dog('pup');
console.log(labrador.name);  
console.log(labrador.type);  
labrador.noise();

let sparrow = new Bird('birdie');
console.log(sparrow.name);   
console.log(sparrow.type);  
sparrow.noise();

La fonction noise dans la classe Animal est déclarée comme une méthode régulière, tandis que dans les classes Bird et Dog, elle est déclarée comme une propriété de classe initialisée avec une fonction fléchée.

La différence entre une méthode régulière et une fonction fléchée réside dans la façon dont elles gèrent la liaison this. Les fonctions fléchées capturent le this de leur contexte lexical, tandis que les méthodes régulières ont leur propre this lié dynamiquement à l'instance de l'objet sur lequel elles sont appelées.

Vous remarquerez que la méthode noise de la classe Animal n'est pas une fonction fléchée. Si on utilise une fonction fléchée pour définir la méthode noise dans la classe Animal, vous modifiez la manière dont la liaison this fonctionne. Une fonction fléchée capture le this du contexte lexical dans lequel elle est définie et n'a pas son propre this dynamiquement lié à l'instance de l'objet sur lequel elle est appelée.

Dans le contexte de l'héritage, cela créerait un problème lors de l'appel de super.noise() dans les classes enfants (Bird et Dog). Lorsque super.noise() serait appelé dans une fonction fléchée, le this dans la fonction fléchée ne serait pas correctement lié à l'instance de la classe enfant, ce qui entraînerait une erreur (pas de référence vers le this de la classe mère).

En revanche, lorsque vous utilisez une méthode régulière pour définir noise dans la classe Animal, le this est correctement lié à l'instance de la classe Animal lorsqu'il est appelé à partir des classes enfants, grâce à la liaison dynamique de this dans les méthodes régulières.