3.1 Conceito de protótipos
Protótipos são uma das principais ideias no JavaScript, permitindo que objetos herdem propriedades e métodos de outros objetos. Diferente de muitas outras linguagens de programação, onde a herança é feita através de classes, no JavaScript ela é baseada em protótipos. Agora vamos dar uma olhada no que são protótipos, como funcionam e como podem ser usados.
Protótipo no JavaScript é um objeto do qual outros objetos podem herdar propriedades e métodos. Cada objeto no JavaScript tem um link oculto para outro objeto — uma propriedade oculta [[Prototype]], que aponta para seu protótipo.
Esse protótipo pode ter seus próprios protótipos, formando uma cadeia de protótipos (prototype chain). Propriedades e métodos de um objeto podem ser herdados por meio dessa cadeia. Isso permite que objetos compartilhem funcionalidades e criem hierarquias de objetos.
Propriedade proto
No JavaScript, cada objeto tem uma propriedade __proto__, que aponta para seu protótipo. Essa propriedade é usada para buscar propriedades e métodos, caso não sejam encontrados no próprio objeto.
Neste exemplo, o objeto child herda o método greet() do objeto parent:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = {
__proto__: parent
};
child.greet(); // Irá exibir: Hello from parent
3.2 Criação e uso de protótipos
1. Object.create()
O método Object.create() permite criar um novo objeto com o protótipo especificado.
Exemplo:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.greet(); // Irá exibir: Hello from parent
2. Adicionando propriedades e métodos ao protótipo
Propriedades e métodos podem ser adicionados ao protótipo, para que fiquem acessíveis a todos os objetos que o herdarem.
Neste exemplo, o método speak() é adicionado ao protótipo animal e está disponível para o objeto dog:
const animal = {
speak() {
console.log(`${this.name} faz um barulho.`);
}
};
const dog = Object.create(animal);
dog.name = 'Buddy';
dog.speak(); // Irá exibir: Buddy faz um barulho.
3. Mudando o protótipo de um objeto
O protótipo de um objeto pode ser alterado usando o método Object.setPrototypeOf().
Neste exemplo, o protótipo do objeto duck é alterado de animal para bird:
const animal = {
speak() {
console.log('Animal fala');
}
};
const bird = {
fly() {
console.log('Pássaro voa');
}
};
const duck = {
__proto__: animal,
quack() {
console.log('Pato grasna');
}
};
Object.setPrototypeOf(duck, bird);
duck.fly(); // Irá exibir: Pássaro voa
duck.quack(); // Irá exibir: Pato grasna
3.3 Trabalhando com protótipos
1. Verificando o protótipo de um objeto
O método Object.getPrototypeOf() permite obter o protótipo de um objeto.
Exemplo:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
console.log(Object.getPrototypeOf(child) === parent); // Irá exibir: true
2. Verificando se um objeto pertence a um protótipo
O operador instanceof é usado para verificar se um objeto é uma instância de um determinado construtor ou protótipo.
Exemplo:
function Person(name) {
this.name = name;
}
const john = new Person('John');
console.log(john instanceof Person); // Irá exibir: true
3. Iterando sobre propriedades de um objeto e seu protótipo
Para iterar sobre as propriedades de um objeto e seu protótipo, você pode usar o loop for...in, que lista todas as propriedades enumeráveis.
Exemplo:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
for (let key in child) {
console.log(key);
}
// Irá exibir:
// name
// greet
Para iterar somente sobre as propriedades próprias do objeto, use o método Object.keys() ou o loop for...of com o método Object.entries().
Exemplo:
const parent = {
greet() {
console.log('Hello from parent');
}
};
const child = Object.create(parent);
child.name = 'Child';
console.log(Object.keys(child)); // Irá exibir: ['name']
for (const [key, value] of Object.entries(child)) {
console.log(key, value);
}
// Irá exibir:
// name Child
GO TO FULL VERSION