Uma introdução completa aos Fundamentos da Programação Orientada a Objetos (POO) em JavaScript. Esta apresentação desmistifica desde a herança prototípica até a moderna sintaxe de class do ES6, cobrindo os 4 pilares essenciais: Abstração, Encapsulamento, Herança e Polimorfismo.

1. POO em
JavaScript
Fundamentos, Pilares e
Classes Modernas
Uma jornada do modelo de protótipos ao ES6+

2. Fundamentos e Objetos em JavaScript
POO
Paradigma que organiza software em torno de objetos, combinando dados e
comportamentos
Benefícios
Reutilização de código, manutenção facilitada, escalabilidade e modelagem
intuitiva
Objetos em JS
exemplo_basico.js
constcarro = {
marca: 'Toyota',
modelo: 'Corolla',
ligar: function() {
console.log('Vrummm!');
}
};
carro.ligar();
// Saída: Vrummm!
Propriedades: Armazenam dados (marca, modelo)
Métodos: Armazenam funções (ligar)

3. POO em JS: Protótipos vs. Classes
JavaScript
Modelo
Baseado em Protótipos
Herança
Objetos herdam diretamente de outros objetos
Criação
Funções Construtoras ou Fábricas
ES6+
Sintaxe class (açúcar sintático)
Linguagens Clássicas
Modelo
Baseado em Classes
Herança
Classes herdam de outras classes
Criação
Classes são "plantas" para objetos
Exemplos
Java, C++, Python, C#
Importante: A sintaxe class do ES6+ oferece uma interface familiar, mas o mecanismo subjacente de herança em JavaScript continua sendo prototípico.

4. Abstração e Encapsulamento
ABSTRAÇÃO
Foco nas características e comportamentos essenciais de um objeto.
Ignora detalhes complexos de implementação.
Objetivo: Simplificar a interação do usuário com o objeto.
Expõe apenas a funcionalidade relevante, escondendo a complexidade interna.
ENCAPSULAMENTO
Agrupar dados (propriedades) e métodos em uma única unidade.
Controlar o acesso ao estado interno do objeto.
ES2020+: Campos privados com prefixo #
Protege dados internos, forçando interação através de métodos públicos.
exemplo_encapsulamento.js
class Conta {
#saldo = 0; // Campo privado
depositar(valor) { this.#saldo += valor; }
getSaldo() { returnthis.#saldo; }
}
const minhaConta = new Conta();
minhaConta.depositar(100); // Permitido
✓
minhaConta.#saldo = 999; // Erro: campo privado
✗

5. Herança e Polimorfismo
Herança
Criação de novas classes (subclasses) a partir de classes existentes (superclasses) para reutilização de
código.
Palavras-chave ES6+
extends: Conecta subclasse à superclasse
super: Acessa métodos da classe pai
Polimorfismo
Capacidade de objetos de diferentes classes responderem ao mesmo método de maneiras distintas.
exemplo_heranca.js
class Animal {
fazerBarulho() {
console.log('Som genérico');
}
}
class Cachorro extends Animal {
fazerBarulho() {
super.fazerBarulho();
console.log('Au Au!');
}
}
const dog = new Cachorro();
dog.fazerBarulho();
// Som genérico
// Au Au!

6. A Sintaxe class (ES6+)
definicao_classe.js
class Produto {
constructor(nome, preco) {
this.nome = nome;
this.preco = preco;
}
exibirPreco() {
console.log(
`R$ ${this.preco}`
);
}
}
class: Define o molde para objetos
constructor: Método especial chamado na criação
instanciacao.js
// Criar instância com new
const livro = new Produto(
'O Hobbit',
49.90
);
// Acessar propriedades
console.log(livro.nome);
// Saída: O Hobbit
// Chamar métodos
livro.exibirPreco();
// Saída: R$ 49.9
new: Cria instância da classe
this: Refere-se à instância criada

7. Métodos, Atributos e o Contexto this
Métodos
Definição
Funções definidas dentro da classe que representam o comportamento do objeto
Acesso
Chamados através da instância: objeto.metodo()
Exemplo
class Pessoa {
apresentar() {
console.log('Olá!');
}
}
Atributos
Definição
Propriedades (dados) do objeto, geralmente inicializadas no constructor
Acesso
Acessados via this.propriedade dentro da classe
Exemplo
constructor(nome) {
this.nome = nome;
}
O Contexto this
Em Métodos de Instância
this refere-se à instância do objeto que está sendo executado. Permite acessar propriedades e
chamar outros métodos da mesma instância.
class Carro {
constructor(marca) {
this.marca = marca;
}
exibir() {
console.log(this.marca);
}
}
Cuidado: O valor de this pode mudar em funções de callback ou closures. Soluções: usar arrow
functions ou bind().
// Arrow function (recomendado)
const fn = () => {
console.log(this);
};
// bind()
const fn2 = function() {
console.log(this);

8. Métodos Estáticos: Funções de Utilidade da Classe
Definição: Métodos que pertencem à classe, e não às suas instâncias. Usados como funções utilitárias que não precisam acessar o estado interno de um objeto.
definicao_static.js
Definição
class Calculadora {
static somar (a, b) {
return a + b;
}
static subtrair (a, b) {
return a - b;
}
multiplicar (b) {
// Método de instância
return this .valor * b;
chamada_static.js
Chamada Direta
// Métodos estáticos
const resultado1 =
Calculadora. somar (5, 3);
console. log (resultado1);
// Saída: 8
const resultado2 =
Calculadora. subtrair (10, 4);
console. log (resultado2);
// Saída: 6
// Método de instância

9. Protótipos: O Mecanismo de Herança
Cadeia de Protótipos
Definição
Cada objeto tem uma ligação interna para seu protótipo.
Herança
Objetos herdam propriedades e métodos de seus protótipos.
Cadeia
Forma uma cadeia: Objeto Protótipo null
→ →
Mecanismo de Lookup
Busca
Ao acessar uma propriedade, o JS percorre a cadeia.
Ordem
1. Objeto 2. Protótipo 3. Protótipo do Protótipo...
Resultado
Se não encontrar, retorna undefined
Classes ES6+ e Protótipos
Relação
Classes ES6+ são açúcar sintático sobre protótipos. O mecanismo subjacente continua sendo prototípico.
acessar_prototipo.js
// Forma moderna
const proto =
Object.getPrototypeOf(obj);
// Forma obsoleta
const proto2 = obj.__proto__;
exemplo_prototipo.js
class Animal {
fazer() { 'Som' }
}
class Gato extends Animal {}
const gato = new Gato();
// gato Gato.proto
→
// Animal.proto
→
// Object.proto
→
Conceito-chave: Compreender protótipos é essencial. Classes facilitam a sintaxe, mas a herança é sempre prototípica.

10. Getters e Setters: Introdução
exemplo_getter.js
class Retangulo {
constructor(altura, largura) {
this.altura = altura;
this.largura = largura;
}
get area() {
returnthis.altura *
this.largura;
}
}
const ret = new
Retangulo(5, 10);
console.log(ret.area);
// Saída: 50
GETTER: Leitura Controlada
Um getter é um método especial para ler propriedades. Acessado como propriedade, sem parênteses .
Características: Cálculos dinâmicos, formatação de dados, ou lógica de acesso controlado.
Próximo: Exploraremos setters para controlar a escrita com validação.

11. Getters e Setters (Parte 2): Validação e Casos de Uso
setter_com_validacao.js
class Conta {
constructor(titular) {
this._titular = titular;
this._saldo = 0;
}
set saldo(valor) {
if (valor < 0) {
thrownewError(
'Saldo negativo!'
);
}
this._saldo = valor;
}
get saldo() {
returnthis._saldo;
}
}
getter_setter_combinados.js
class Usuario {
constructor(email) {
this._email = email;
}
get email() {
returnthis._email.
toLowerCase();
}
set email(novoEmail) {
if (!novoEmail.
includes('@')) {
thrownewError(
'Inválido'
);
}
this._email = novoEmail;
}
}
Casos de Uso: Getters
Cálculos Dinâmicos
Computar valores baseado em propriedades internas
Formatação
Retornar dados formatados (maiúsculas, datas, etc.)
Acesso Controlado
Permitir leitura apenas de dados públicos
Lazy Loading
Carregar dados sob demanda
Casos de Uso: Setters
Validação
Garantir que valores atendam a critérios
Transformação
Converter valores antes de armazenar
Efeitos Colaterais
Disparar ações quando propriedade muda
Regras de Negócio
Aplicar lógica complexa na atribuição
Boas Práticas: Use getters e setters para interface clara. Prefira propriedades privadas (_propriedade ou #propriedade). Sempre valide dados em setters e lance erros apropriados.

12. Verificação com instanceof
O Operador instanceof
O operador instanceof testa se o protótipo de um construtor aparece em algum lugar na cadeia de protótipos de um objeto.
Uso Principal: Verificar se um objeto foi criado a partir de uma determinada classe ou função construtora.
Sintaxe:objeto instanceof Classe retorna
→ true ou false
exemplo_instanceof.js
class Produto {
constructor (nome) {
this .nome = nome;
}
}
const livro = new Produto(
'O Hobbit'
);
// Verificações
livro instanceof Produto;
// → true
livro instanceof Object;
// → true
livro instanceof Array;
heranca_instanceof.js
class Animal {}
class Cachorro extends Animal {}
const dog = new Cachorro();
// Verifica a cadeia
dog instanceof Cachorro;
// → true
dog instanceof Animal;
// → true
dog instanceof Object;
// → true

13. Conclusão: Dominando a POO em JavaScript
Abstração
Foco no essencial, ignorando complexidade
Encapsulamento
Proteger dados com campos privados
Herança
Reutilizar código com extends
Polimorfismo
Mesmos métodos, respostas diferentes
Conceitos-Chave Aprendidos
POO em JS: Modelo híbrido com sintaxe de classes sobre um motor de protótipos
Classes ES6+: Açúcar sintático que facilita a POO tradicional
Protótipos: O mecanismo real de herança em JavaScript
Campos Privados: Verdadeiro encapsulamento com #
Getters/Setters: Controle de acesso com validação
Próximos Passos
Praticar: Criar classes em projetos reais
Explorar: Padrões de design (Factory, Singleton, etc.)
Aprofundar: Entender protótipos em detalhes
Aplicar: Usar em frameworks (React, Vue, Angular)
Refatorar: Melhorar código legado com POO
Lembre-se: A POO é essencial para construir aplicações JavaScript robustas, escaláveis e de fácil manutenção. Continue praticando e explorando novos conceitos!