Nível de Classe vs. Nível de Instância

Parte da seção Programação Orientada a Objetos do Journey de JavaScript da Coddy — lição 31 de 56.

Em classes JavaScript, existem dois níveis distintos de propriedades e métodos:

Nível de instância: Propriedades e métodos que pertencem a cada objeto individual criado a partir da classe.
Nível de classe: Propriedades e métodos que pertencem à própria classe, não às instâncias.

Vamos entender a diferença:

Primeiro, vamos examinar os membros de nível de instância. Crie uma classe comum com um método de instância:

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

Crie uma instância da classe Car:

const myCar = new Car("Toyota");

Chame o método de instância:

console.log(myCar.drive()); // Saída: "The Toyota is driving"

Observe que cada instância recebe sua própria cópia do método drive e pode acessar suas próprias propriedades usando this.

Agora, vamos olhar para os membros de nível de classe. Adicionamos um método estático à nossa classe. Use a palavra-chave static na frente do nome do método para criar um método que pertence à própria classe, não às instâncias.

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

Métodos estáticos são úteis para funções utilitárias que não dependem de dados de instâncias específicas. O método estático é chamado na própria classe, não nas instâncias:

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

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

Tentar chamar um método estático em uma instância resultará em um erro:

car1.compareModels(car1, car2); // Erro: car1.compareModels não é uma função

Desafio

Você recebeu uma classe Calculator apenas com um construtor. Sua tarefa é adicionar dois métodos:

1. Método de Instância <strong>add(number)</strong>

Adiciona o número fornecido ao valor atual da calculadora
Atualiza this.value e retorna o novo valor
*Ele é chamado em instâncias da calculadora: calc.add(3)

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

Recebe dois números e retorna o produto deles
NÃO utiliza this (métodos estáticos não possuem dados de instância)
*Ele é chamado na própria classe Calculator: Calculator.multiply(4, 6)

Folha de consulta

As classes JavaScript têm dois níveis de propriedades e métodos:

Nível de instância: Pertencem a cada objeto individual criado a partir da classe
Nível de classe: Pertencem à própria classe, não às instâncias

Métodos de Instância:

Métodos regulares que podem acessar propriedades de instância 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:

Use a palavra-chave static para criar métodos que pertencem à própria classe. Eles são chamados na classe, não nas instâncias:

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

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

// Chamada na própria classe
console.log(Car.compareModels(car1, car2)); // "Comparing Toyota with Honda"

// Chamar em uma instância causa um erro
car1.compareModels(car1, car2); // Error: car1.compareModels is not a function

Métodos estáticos são úteis para funções utilitárias que não dependem de dados de instâncias específicas.

Experimente você mesmo

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


// Não modifique o código abaixo
const calc = new Calculator(5);        // Cria a calculadora com valor = 5
const result1 = calc.add(3);           // Deve somar 3 → 5 + 3 = 8
const result2 = Calculator.multiply(4, 6); // Deve multiplicar 4 × 6 = 24
console.log(result1);                   // Esperado: 8
console.log(result2);                   // Esperado: 24