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, existen dos niveles distintos de propiedades y métodos:

Nivel de instancia: Propiedades y métodos que pertenecen a cada objeto individual creado a partir de la clase.
Nivel de clase: Propiedades y métodos que pertenecen a la clase en sí, no a las instancias.

Entendamos la diferencia:

Primero, veamos los miembros a nivel 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 obtiene su propia copia del método drive y puede acceder a sus propias propiedades usando this.

Ahora, veamos los miembros a nivel de clase. Agregamos 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 pertenezca a la clase misma, 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 datos de instancias específicas. 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 resultará en 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 agregar dos métodos:

1. Método de Instancia <strong>add(number)</strong>

Suma el número dado al valor actual de la calculadora
Actualiza this.value y devuelve el nuevo valor
*Se llama sobre instancias de la calculadora: calc.add(3)

2. Método Estático <strong>multiply(num1, num2)</strong>

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

Hoja de referencia

Las clases de JavaScript tienen dos niveles de propiedades y métodos:

Nivel de instancia: Pertenecen a cada objeto individual creado a partir de la clase
Nivel de clase: Pertenecen a la clase misma, no a las instancias

Métodos de instancia:

Métodos regulares que pueden acceder a las propiedades de la instancia usando 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étodos estáticos:

Usa la palabra clave static para crear métodos que pertenecen a la clase misma. Se llaman en la clase, no en las instancias:

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

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

// Llamar en la clase misma
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// Llamar en una instancia causa un error
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

Los métodos estáticos son útiles para funciones de utilidad que no dependen de datos de instancias específicos.

Pruébalo tú mismo

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


// No modifiques el código de abajo
const calc = new Calculator(5);        // Crea la calculadora con el 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