A livello di classe o di istanza

Fa parte della sezione Programmazione orientata agli oggetti del percorso JavaScript di Coddy. Lezione 31 di 56.

Nelle classi JavaScript, esistono due livelli distinti di proprietà e metodi:

A livello di istanza: proprietà e metodi che appartengono a ciascun singolo oggetto creato dalla classe.
A livello di classe: proprietà e metodi che appartengono alla classe stessa, non alle istanze.

Comprendiamo la differenza:

Per prima cosa, esaminiamo i membri a livello di istanza. Crea una normale classe con un metodo di istanza:

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

Crea un'istanza della classe Car:

const myCar = new Car("Toyota");

Chiama il metodo di istanza:

console.log(myCar.drive()); // Виводить: "The Toyota is driving"

Nota che ogni istanza ottiene una propria copia del metodo drive e può accedere alle proprie proprietà usando this.

Ora diamo un’occhiata ai membri a livello di classe. Aggiungiamo un metodo statico alla nostra classe. Usa la parola chiave static prima del nome del metodo per creare un metodo che appartiene alla classe stessa, non alle istanze.

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

I metodi statici sono utili per le funzioni di utilità che non dipendono dai dati di una specifica istanza. Il metodo statico viene chiamato sulla classe stessa, non sulle istanze:

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

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

Provare a chiamare un metodo statico su un'istanza genererà un errore:

car1.compareModels(car1, car2); // Errore: car1.compareModels non è una funzione

Sfida

Ti viene data una classe Calculator con solo un costruttore. Il tuo compito è aggiungere due metodi:

1. Metodo di istanza <strong>add(number)</strong>

Aggiunge il numero indicato al valore corrente della calcolatrice
Aggiorna this.value e restituisce il nuovo valore
*Viene chiamato sulle istanze della calcolatrice: calc.add(3)

2. Metodo statico <strong>multiply(num1, num2)</strong>

Accetta due numeri e restituisce il loro prodotto
NON usa this (i metodi statici non hanno dati di istanza)
*Viene chiamato direttamente sulla classe Calculator: Calculator.multiply(4, 6)

Provalo tu

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


// Non modificare il codice qui sotto
const calc = new Calculator(5);        // Crea una calcolatrice con value = 5
const result1 = calc.add(3);           // Dovrebbe sommare 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Dovrebbe moltiplicare 4 × 6 = 24
console.log(result1);                   // Previsto: 8
console.log(result2);                   // Previsto: 24