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 :

Niveau instance : Propriétés et méthodes qui appartiennent à chaque objet individuel créé à partir de la classe.
Niveau 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 au niveau de l'instance. Créez une classe standard avec une méthode d'instance :

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

Créez 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"

Remarquez que chaque instance reçoit sa propre copie de la méthode drive et peut accéder à ses propres propriétés en utilisant this.

Maintenant, examinons les membres au niveau de la 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 de données d'instance spécifiques. 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 vous donne une classe Calculator avec seulement un constructeur. Votre tâche consiste à ajouter deux méthodes :

1. Méthode d'instance <strong>add(number)</strong>

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

2. Méthode statique <strong>multiply(num1, num2)</strong>

Prend deux nombres et retourne 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)

Aide-mémoire

Les classes JavaScript ont deux niveaux de propriétés et de méthodes :

Niveau instance : Appartiennent à chaque objet individuel créé à partir de la classe
Niveau classe : Appartiennent à la classe elle-même, pas aux instances

Méthodes d'instance :

Méthodes régulières qui peuvent accéder aux propriétés d'instance en utilisant this :

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

const myCar = new Car("Toyota");
console.log(myCar.drive()); // "The Toyota is driving"

Méthodes statiques :

Utilisez le mot-clé static pour créer des méthodes qui appartiennent à la classe elle-même. Elles sont appelées sur la classe, et non sur les instances :

class Car {
  static compareModels(car1, car2) {
    return `Comparing ${car1.make} with ${car2.make}`;
  }
}

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

// Appel sur la classe elle-même
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// L'appel sur une instance provoque une erreur
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

Les méthodes statiques sont utiles pour les fonctions utilitaires qui ne dépendent pas de données d'instance spécifiques.

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 la valeur = 5
const result1 = calc.add(3);           // Devrait ajouter 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