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 ogni 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, diamo un'occhiata ai membri a livello di istanza. Crea una classe normale 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()); // Stampa: "The Toyota is driving"

Nota che ogni istanza può chiamare il metodo drive, che tutte le istanze condividono, e al suo interno this si riferisce all’istanza su cui è stato chiamato, quindi legge le proprietà proprie di quell’istanza.

Ora esaminiamo i 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 un'istanza specifica. 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 provocherà un errore:

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

Sfida

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

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

Aggiunge il numero fornito al valore attuale 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 ne restituisce il 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 valore = 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