Comprendre le JavaScript: comment fonctionnent les Classes ?

Comprendre le JavaScript: comment fonctionnent les Classes ?
Mise à jours :

Tu peux déjà noter qu'il existe deux grands types de langages orientés objet :

  • ceux basés sur les classes,
  • et ceux basés sur les prototypes.

Le JavaScript est un langage orienté objet basé sur la notion de prototypes, mais la plupart des langages supportant l’orienté objet sont basés sur les classes.

Les classes ont été introduites dans JavaScript ECMA2015. 

Contrairement aux classes en mode orienté objet, les classes JavaScript ne sont que des types spéciaux de fonctions. 

Mais au lieu d'utiliser le mot-clé "function", nous utilisons la "class". 

Il a été introduit dans JavaScript pour que la syntaxe ressemble à d'autres langages orientés objet (java, python, c++).

Comment créer ou définir une classe ?

Voici le code :

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
}

Pour déclarer une classe, tu vas utiliser le mot-clé class avec le nom de la classe ( Rectangleici).

Constructor: Il s'agit d'une méthode spéciale pour initialiser une instance de cette classe. 

Cela signifie donc que chaque fois que nous créons une nouvelle instance de la classe, elle invoquera le constructeur.

Comment ajouter des méthodes dans une classe ?

class Rectangle {
    constructor(height, width) {
        this.height = height;
        this.width = width;
    }
    // Méthode prototype
    area() {
      return console.log(`Resultat : ${this.height*this.width}`);
    }
    // Méthod statique
    static display(rect){
        return console.log(`Height: ${rect.height} Width: ${rect.width}`);
    }
}
rectangle = new Rectangle(7, 4);  // instantiation de la classe 
rectangle.area(); // Resulta : 28
Rectangle.display(rectangle1);// Height: 7 Width: 4
  • Méthode prototype : area() est une méthode prototype.
  • Méthode statique : display() est une méthode statique.

Méthode de prototype

Une méthode prototype est une méthode accessible uniquement lorsque tu le crées avec une instance de la classe. 

Comme peux le voir dans l'exemple ci-dessus, tu peux voir la méthode prototype en te référant au nom de la méthode de l'objet suivi de parenthèses (tous les paramètres iraient à l'intérieur des parenthèses).

Méthode statique

Une méthode statique est quelque chose que vous pouvez appeler sans instancier la classe. 

Les méthodes statiques sont définies sur la classe elle-même et non sur l'objet. 

Cela signifie que tu ne peux pas appeler la méthode statique sur l'objet ( rectangle1 ), mais sur la classe (Rectangle) comme indiqué dans le code.

Comment faire Héritage en Javascript ?

Comme son nom l'indique, il s'agit de s'approprier les fonctionnalités d'une classe mère.

class Car {
    constructor(brand) {
        this.carname = brand;
    }
    present() {
      return 'Je possede  ' + this.carname;
   }
}

class Model extends Car {
    constructor(brand, mod) {
        super(brand);
        this.model = mod;
    }
    show() {
        return console.log(`${this.present()} , Est un  ${this.model}`);
    }
}
mycar = new Model("Ford", "Mustang");
mycar.show();// J'ai un Ford, Est un Mustang

Pour créer un héritage de classe, tu peux utiliser le extends mot-clé.

Une classe créée avec un héritage de classe, hérite de toutes les méthodes d'une autre classe. 

Dans l'exemple ci-dessus, la classe Model hérite de toute la méthode de la classe Car.

La super()méthode fait référence à la classe parente. 

En appelant la super()méthode dans la méthode "constructeur", nous appelons la méthode "constructeur" du parent et obtenons l'accès aux propriétés et à la méthode du parent. L'héritage est utile pour la réutilisation du code, nous pouvons réutiliser les propriétés et la méthode d'une classe existante lorsque vous créez une nouvelle classe.

Code d'exemple d'utilisation des classes en javascript

Exemple 1 :

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 paramètre
  }
  parle() {
    console.log(`${this.nom} aboie.`);
  }
}

Exemple 2 :

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.`);
  }
}

Conclusion

Nous avons utilisé le mot clé :

  • class : pour déclarer une classe avec un 'constructor' pour définir les propriétés par defaut de la classe
  • extends : pour hériter d'une autre classe et y accéder dans notre classe avec la méthode super
  • nous avons aussi vu qu'il y a des méthodes dans une classe, ces méthodes peuvent être static ou prototype.

Grace au code d'exemple, tu peux continuer à t'entrainer.

Apprendre encore plus

Ceci pourait t'aider à apprendre plus