Prof. Fernando

01 / ENSINO · GUIA PRÁTICO

JavaScript e Orientação a Objetos

Como declarar objetos e classes em JavaScript, do objeto literal à palavra-chave class.

Todos os exemplos podem ser executados no console do navegador (F12 → aba Console) ou com Node.js. Para entender as ideias por trás do código — abstração, encapsulamento, herança e polimorfismo — veja também o guia Conceitos de Orientação a Objetos.

01 · OBJETOSObjetos literais: o jeito mais simples

Em JavaScript, um objeto é um conjunto de pares chave: valor. As chaves são as propriedades (os dados do objeto) e, quando o valor é uma função, chamamos de método (o que o objeto sabe fazer). A forma mais direta de criar um objeto é escrevê-lo entre chaves — o chamado objeto literal:

const aluno = {
  nome: "Ana",
  matricula: 2026001,
  notas: [8, 7.5, 9],
  media() {
    const soma = this.notas.reduce((total, nota) => total + nota, 0);
    return soma / this.notas.length;
  }
};

console.log(aluno.nome);     // "Ana"
console.log(aluno.media());  // 8.166...

Dentro de um método, this se refere ao próprio objeto: this.notas é a lista de notas de aluno.

Acessando e alterando propriedades

Há duas notações de acesso. A notação de ponto é a mais comum; a de colchetes é útil quando o nome da propriedade está guardado em uma variável ou tem caracteres especiais:

aluno.nome;            // notação de ponto
aluno["matricula"];    // notação de colchetes

const campo = "nome";
aluno[campo];          // "Ana"

aluno.curso = "Informática";  // cria uma nova propriedade
aluno.nome = "Ana Souza";     // altera uma existente
delete aluno.matricula;       // remove a propriedade

Repare que const impede apenas que a variável aluno aponte para outro objeto — o conteúdo do objeto continua podendo ser alterado.

Quando usar: objetos literais são ótimos para um único objeto, como as configurações de uma página ou os dados vindos de um formulário. Quando você precisa de muitos objetos com a mesma estrutura (vários alunos, vários produtos), o ideal é ter um "molde" — uma classe.

02 · MOLDESFunção construtora e o operador new

Antes de 2015, JavaScript não tinha a palavra-chave class. Para criar vários objetos parecidos, usava-se uma função construtora, chamada com o operador new. Por convenção, o nome começa com letra maiúscula:

function Aluno(nome, matricula) {
  this.nome = nome;
  this.matricula = matricula;
}

Aluno.prototype.apresentar = function () {
  return `Olá, eu sou ${this.nome}.`;
};

const ana = new Aluno("Ana", 2026001);
const bruno = new Aluno("Bruno", 2026002);

console.log(bruno.apresentar()); // "Olá, eu sou Bruno."

O new cria um objeto vazio, faz this apontar para ele, executa a função e devolve o objeto pronto. Os métodos ficam no prototype para que todos os alunos compartilhem a mesma função, em vez de cada um carregar uma cópia.

Você ainda vai encontrar esse estilo em códigos mais antigos e em tutoriais. Em código novo, prefira class (próxima seção): por baixo dos panos o funcionamento é o mesmo, mas a escrita é mais clara.

03 · CLASSESDeclarando classes com class

Uma classe é um molde que descreve quais propriedades e métodos os objetos terão. Cada objeto criado a partir dela é uma instância. O método especial constructor roda automaticamente quando usamos new e serve para preencher as propriedades iniciais:

class Aluno {
  constructor(nome, matricula) {
    this.nome = nome;
    this.matricula = matricula;
    this.notas = [];
  }

  adicionarNota(nota) {
    this.notas.push(nota);
  }

  media() {
    if (this.notas.length === 0) return 0;
    const soma = this.notas.reduce((total, nota) => total + nota, 0);
    return soma / this.notas.length;
  }
}

const ana = new Aluno("Ana", 2026001);
ana.adicionarNota(8);
ana.adicionarNota(9);

console.log(ana.media());             // 8.5
console.log(ana instanceof Aluno);    // true
  • Os métodos são escritos sem a palavra function e sem vírgulas entre eles.
  • Por convenção, nomes de classes usam PascalCase (ContaBancaria); propriedades e métodos usam camelCase (adicionarNota).
  • instanceof verifica se um objeto foi criado a partir de determinada classe.

Campos de classe

Propriedades com valor inicial fixo podem ser declaradas diretamente no corpo da classe, fora do constructor:

class Contador {
  valor = 0;

  incrementar() {
    this.valor++;
  }
}

const c = new Contador();
c.incrementar();
console.log(c.valor); // 1
04 · RECURSOSGetters, setters e métodos estáticos

get e set

Um getter (get) é um método que é lido como se fosse uma propriedade. Um setter (set) é executado quando atribuímos um valor — útil para validar dados antes de guardá-los:

class Produto {
  constructor(nome, preco) {
    this.nome = nome;
    this.preco = preco; // passa pelo setter abaixo
  }

  get preco() {
    return this._preco;
  }

  set preco(valor) {
    if (valor < 0) {
      throw new Error("O preço não pode ser negativo.");
    }
    this._preco = valor;
  }

  get precoFormatado() {
    return `R$ ${this._preco.toFixed(2)}`;
  }
}

const caderno = new Produto("Caderno", 18.9);
console.log(caderno.precoFormatado); // "R$ 18.90" — sem parênteses
caderno.preco = -5;                  // Error: O preço não pode ser negativo.

O sublinhado em _preco é só uma convenção para indicar "uso interno". Para proteger de verdade um dado, JavaScript tem campos privados com #, explicados na seção de encapsulamento do guia de conceitos.

Métodos estáticos

Um método static pertence à classe, não às instâncias. É chamado pelo nome da classe e costuma ser usado para funções utilitárias ou para criar objetos de formas alternativas:

class Temperatura {
  static celsiusParaFahrenheit(c) {
    return c * 9 / 5 + 32;
  }
}

console.log(Temperatura.celsiusParaFahrenheit(25)); // 77

Você já usa métodos estáticos sem perceber: Math.max(), Number.parseInt() e Array.isArray() são todos chamados pelo nome da classe.

05 · HERANÇAEstendendo uma classe com extends

Com extends, uma classe herda propriedades e métodos de outra. No constructor da classe filha, super(...) chama o construtor da classe mãe e precisa vir antes de qualquer uso de this:

class Pessoa {
  constructor(nome) {
    this.nome = nome;
  }

  apresentar() {
    return `Olá, eu sou ${this.nome}.`;
  }
}

class Professor extends Pessoa {
  constructor(nome, disciplina) {
    super(nome);
    this.disciplina = disciplina;
  }

  apresentar() {
    return `${super.apresentar()} Leciono ${this.disciplina}.`;
  }
}

const fernando = new Professor("Fernando", "MDCOO");
console.log(fernando.apresentar());
// "Olá, eu sou Fernando. Leciono MDCOO."

O conceito de herança — e quando faz sentido usá-la — é explicado com mais calma no guia Conceitos de Orientação a Objetos.

06 · CUIDADOSArmadilhas comuns

Esquecer o new

Chamar uma classe sem new gera erro: TypeError: Class constructor Aluno cannot be invoked without 'new'. Com funções construtoras antigas é pior: não há erro, e this acaba apontando para o lugar errado.

Classes não são içadas

Diferente de function, uma classe só pode ser usada depois da linha em que foi declarada. Usar antes gera ReferenceError.

this em arrow functions

Arrow functions (=>) não têm o próprio this: elas usam o this de onde foram escritas. Por isso, não use arrow function para declarar métodos de um objeto literal:

const turma = {
  nome: "INFO 1",
  errado: () => this.nome,  // this NÃO é turma
  certo() {
    return this.nome;         // this é turma
  }
};

console.log(turma.errado()); // undefined
console.log(turma.certo());  // "INFO 1"

Perder o this ao passar um método adiante

Ao passar um método como callback (por exemplo, para addEventListener ou setTimeout), ele perde a ligação com o objeto. Use uma arrow function para envolver a chamada:

const ana = new Aluno("Ana", 2026001);

setTimeout(ana.media, 1000);         // erro: this não é mais ana
setTimeout(() => ana.media(), 1000); // funciona

← Voltar para Ensino