7.8.2 - Classes o Objetos

🧬 Protótipos em JavaScript — Como os Objetos Realmente Funcionam?

🧬 Protótipos em JavaScript — Como os Objetos Realmente Funcionam?

Agora que você já entende objetos, vamos abrir a caixa preta 🔍 e descobrir como eles funcionam por dentro no JavaScript. Bora descobrir o que são protótipos e por que eles são tão importantes?

---

🧠 Como os Objetos Funcionam no Computador?

Quando você cria um objeto em JavaScript, ele não é apenas uma caixinha com dados. Ele também herda comportamentos de outro objeto, chamado de protótipo.

🧩 Isso significa que, se você tentar acessar algo que não está no seu objeto, o JavaScript vai procurar no protótipo dele. E se não encontrar lá, procura no protótipo do protótipo… criando uma cadeia de protótipos.

---

🛠️ Formas de Criar Objetos

Você pode criar objetos de várias formas em JavaScript:

// Objeto literal
const pessoa = {
  nome: "João"
};

// Usando o construtor Object()
const pessoa1 = new Object(); // cria um objeto vazio

const pessoa2 = new Object({
  name: 'Chris',
  age: 38,
  greeting: function() {
    alert('Hi! I\'m ' + this.name + '.');
  }
});


// Usando Object.create()
const animal = Object.create(null);

// Usando uma função construtora + new
function Carro(marca) {
  this.marca = marca;
}
const meuCarro = new Carro("Fiat");

---

🧬 O que é um Protótipo?

Todo objeto em JavaScript tem um protótipo — um outro objeto do qual ele herda métodos e propriedades.

console.log(meuCarro.toString()); // [object Object]

🧐 Mas você não criou toString()! Esse método veio do protótipo padrão do JavaScript: Object.prototype.

---

🔗 Cadeia de Protótipos (Prototype Chain)

Imagine uma escada 🪜:

• meuCarro não tem toString()?

• Ele sobe até Carro.prototype

• Não tem lá também? Vai até Object.prototype

• Ainda não? Chega em null (fim da linha)

console.log(Object.getPrototypeOf(meuCarro)); 
// → Carro.prototype

console.log(Object.getPrototypeOf(Carro.prototype)); 
// → Object.prototype

---

🔁 Prototype vs. __proto__

Esses dois termos são parecidos, mas têm usos diferentes:

Termo	O que é?	Exemplo
__proto__	Aponta para o protótipo do objeto	obj.__proto__
prototype	Usado em funções construtoras para definir o protótipo das instâncias que serão criadas	Func.prototype

function Animal() {}
Animal.prototype.som = function() {
  console.log("Som de animal");
};

const cachorro = new Animal();

console.log(cachorro.__proto__ === Animal.prototype); // true

---

🏗️ Funções Construtoras + new

Uma função construtora cria novos objetos com protótipos definidos:

function Pessoa(nome) {
  this.nome = nome;
}

Pessoa.prototype.dizerNome = function() {
  console.log(`Olá, eu sou ${this.nome}`);
};

const maria = new Pessoa("Maria");
maria.dizerNome(); // Olá, eu sou Maria

🔹 Aqui, dizerNome não está em maria, está no Pessoa.prototype.

🧠 O objeto acessa esse método pela cadeia de protótipos, sem copiar nada.

---

🪄 Herança com Object.create()

Quer criar um objeto e dizer qual será seu protótipo? Use Object.create():

const veiculo = {
  mover: function() {
    console.log("Veículo em movimento...");
  }
};

const bicicleta = Object.create(veiculo);
bicicleta.mover(); // Veículo em movimento...

👉 bicicleta herda tudo de veiculo, mas ainda é um objeto separado.

---

🧬 A propriedade constructor

Todo objeto criado com uma função construtora guarda uma referência à função original:

console.log(maria.constructor === Pessoa); // true

Isso é útil para saber qual "molde" criou o objeto.

---

🧰 Adicionando ao Protótipo

Você pode adicionar métodos depois que a função já foi criada:

Pessoa.prototype.andar = function() {
  console.log(`${this.nome} está andando`);
};

maria.andar(); // Maria está andando

🧠 Assim, todas as instâncias da função Pessoa terão acesso ao novo método — sem precisar editar o construtor.

---

🧪 Definindo Propriedades no Construtor vs. no Protótipo

Local	Afeta cada objeto individualmente?	Copiado?
Dentro do constructor	✅ Sim, é exclusivo de cada instância	Sim
Dentro de prototype	❌ Compartilhado entre todos	Não

function Aluno(nome) {
  this.nome = nome; // Propriedade única
}

Aluno.prototype.escola = "Escola XYZ"; // Propriedade compartilhada

---

📌 Padrão Comum: Métodos no Prototype

function Produto(nome, preco) {
  this.nome = nome;
  this.preco = preco;
}

Produto.prototype.mostrarInfo = function() {
  console.log(`${this.nome} custa R$${this.preco}`);
};

const camisa = new Produto("Camisa", 49.90);
camisa.mostrarInfo(); // Camisa custa R$49.9

📦 Esse padrão economiza memória: todos os produtos usam o mesmo método, sem duplicação.

---

🌟 Resumo Rápido

• Objetos têm um protótipo que serve como modelo

• JavaScript é uma linguagem baseada em protótipos

• Protótipos formam uma cadeia de herança

• Métodos e propriedades são acessados, não copiados

• Use new, Object.create(), __proto__, prototype para controlar heranças e comportamentos

---

🔍 Quer ver protótipos em ação?

console.log("texto".toUpperCase()); // TEXTO

📌 Isso funciona porque "texto" é um objeto String, e herdou o método toUpperCase() do String.prototype!

---

🧭 Conclusão

Entender protótipos é como descobrir os bastidores do JavaScript! 🎭 Com esse conhecimento, você consegue entender como as coisas realmente funcionam, economizar memória, reaproveitar código e criar sistemas organizados.