Niveau classe vs Niveau instance

Fait partie de la section Programmation Orientée Objet du Journey JavaScript de Coddy. Leçon 31 sur 56.

Dans les classes JavaScript, il existe deux niveaux distincts de propriétés et de méthodes :

Au niveau de l’instance : propriétés et méthodes qui appartiennent à chaque objet individuel créé à partir de la classe.
Au niveau de la classe : propriétés et méthodes qui appartiennent à la classe elle-même, et non aux instances.

Comprenons la différence :

Tout d’abord, examinons les membres d’instance. Crée une classe ordinaire avec une méthode d’instance :

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
}

Crée une instance de la classe Car :

const myCar = new Car("Toyota");

Appelez la méthode d’instance :

console.log(myCar.drive()); // Affiche : "The Toyota is driving"

Remarque que chaque instance peut appeler la méthode drive, que toutes les instances partagent, et qu'à l'intérieur, this fait référence à l'instance sur laquelle elle a été appelée ; elle lit donc les propriétés propres à cette instance.

Maintenant, examinons les membres de classe. Nous ajoutons une méthode statique à notre classe. Utilisez le mot-clé static devant le nom de la méthode pour créer une méthode qui appartient à la classe elle-même, et non aux instances.

class Car {
  constructor(make) {
    this.make = make;
  }
  
  drive() {
    return `The ${this.make} is driving`;
  }
  
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

Les méthodes statiques sont utiles pour les fonctions utilitaires qui ne dépendent pas des données d’une instance spécifique. La méthode statique est appelée sur la classe elle-même, et non sur les instances :

const car1 = new Car("Toyota");
const car2 = new Car("Honda");

console.log(Car.compareModels(car1, car2)); // Affiche : "Comparing Toyota with Honda"

Tenter d’appeler une méthode statique sur une instance entraînera une erreur :

car1.compareModels(car1, car2); // Erreur : car1.compareModels n'est pas une fonction

Défi

On te donne une classe Calculator avec seulement un constructeur. Ta tâche consiste à ajouter deux méthodes :

1. Méthode d’instance add(number)

Ajoute le nombre donné à la valeur actuelle de la calculatrice
Met à jour this.value et renvoie la nouvelle valeur
*Elle est appelée sur les instances de la calculatrice : calc.add(3)

2. Méthode statique multiply(num1, num2)

Prend deux nombres et renvoie leur produit
N’utilise PAS this (les méthodes statiques n’ont pas de données d’instance)
*Elle est appelée sur la classe Calculator elle-même : Calculator.multiply(4, 6)

Essayez vous-même

import { Calculator } from './calculator.js';


// Ne modifiez pas le code ci-dessous
const calc = new Calculator(5);        // Crée une calculatrice avec value = 5
const result1 = calc.add(3);           // Devrait additionner 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Devrait multiplier 4 × 6 = 24
console.log(result1);                   // Attendu : 8
console.log(result2);                   // Attendu : 24