Nivel de clase vs. Nivel de instancia

Parte de la sección Programación Orientada a Objetos del Journey de JavaScript de Coddy. Lección 31 de 56.

En las clases de JavaScript, hay dos niveles distintos de propiedades y métodos:

De instancia: Propiedades y métodos que pertenecen a cada objeto individual creado a partir de la clase.
De clase: Propiedades y métodos que pertenecen a la propia clase, no a las instancias.

Entendamos la diferencia:

Primero, veamos los miembros de instancia. Crea una clase normal con un método de instancia:

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

Crea una instancia de la clase Car:

const myCar = new Car("Toyota");

Llama al método de instancia:

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

Observa que cada instancia puede llamar al método drive, que comparten todas las instancias, y que dentro de él this se refiere a la instancia en la que se llamó, por lo que lee las propiedades propias de esa instancia.

Ahora, veamos los miembros de clase. Añadimos un método estático a nuestra clase. Usa la palabra clave static delante del nombre del método para crear un método que pertenece a la propia clase, no a las instancias.

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

Los métodos estáticos son útiles para funciones de utilidad que no dependen de los datos de una instancia específica. El método estático se llama en la propia clase, no en las instancias:

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

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

Intentar llamar a un método estático en una instancia provocará un error:

car1.compareModels(car1, car2); // Error: car1.compareModels no es una función

Desafío

Se te proporciona una clase Calculator que solo tiene un constructor. Tu tarea es añadir dos métodos:

1. Método de instancia add(number)

Añade el número indicado al valor actual de la calculadora
Actualiza this.value y devuelve el nuevo valor
*Se llama en las instancias de la calculadora: calc.add(3)

2. Método estático multiply(num1, num2)

Recibe dos números y devuelve su producto
NO usa this (los métodos estáticos no tienen datos de instancia)
*Se llama en la propia clase Calculator: Calculator.multiply(4, 6)

Pruébalo tú mismo

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


// No modifiques el código de abajo
const calc = new Calculator(5);        // Crea una calculadora con valor = 5
const result1 = calc.add(3);           // Debería sumar 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Debería multiplicar 4 × 6 = 24
console.log(result1);                   // Esperado: 8
console.log(result2);                   // Esperado: 24