Aprenda The Prototype Chain | Prototypes, Inheritance, and the this Keyword

To understand how JavaScript handles inheritance and property access, you need to learn about the prototype chain. In JavaScript, every object has an internal link to another object called its prototype. When you try to access a property on an object, JavaScript first looks for the property on that object itself. If the property does not exist there, JavaScript continues searching up the prototype chain until it either finds the property or reaches the end of the chain (where the prototype is null). This mechanism is the foundation for inheritance in JavaScript and allows objects to share properties and methods efficiently.


              12345678910111213
            
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  }
};

const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true
rabbit.walk(); // "Animal walks"
console.log(rabbit.hops); // true

In this example, you create an animal object with properties and a method. Then, you use Object.create(animal) to make a new object, rabbit, that has animal as its prototype. The rabbit object gets its own property, hops, but does not have its own eats property or walk method.

When you access rabbit.eats, JavaScript checks if rabbit itself has an eats property. Since it does not, it looks up the prototype chain and finds eats on animal. The same happens when you call rabbit.walk()—the method is not on rabbit, so JavaScript finds it on animal and executes it. However, rabbit.hops is found directly on rabbit, so it is returned immediately.

This process is called property lookup along the prototype chain:

JavaScript checks if the property exists directly on the object;
If not, it checks the object's prototype;
This process repeats up the chain until the property is found or the end is reached;
If the property is never found, undefined is returned.


              123456789
            
const animal = {
  eats: true
};

const rabbit = Object.create(animal);
rabbit.eats = false;

console.log(rabbit.eats); // false
console.log(animal.eats); // true

In this code, rabbit is created with animal as its prototype, just as before. However, you then assign rabbit.eats = false. Now, when you access rabbit.eats, JavaScript finds the property directly on rabbit and returns false, without looking up the prototype chain. This is called property shadowing: the property on rabbit "shadows" or overrides the property of the same name on its prototype. The original animal.eats remains unchanged, demonstrating how each object maintains its own properties even when sharing a prototype. Understanding the prototype chain and property lookup is crucial for writing predictable, reusable code in JavaScript.

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1

Pergunte à IA

Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo

Suggested prompts:

Can you explain more about how property shadowing works in JavaScript?

What happens if I delete a property from an object that shadows a prototype property?

How can I check if a property is directly on an object or inherited from its prototype?

Awesome!

Completion rate improved to 7.69

Deslize para mostrar o menu


              12345678910111213
            
const animal = {
  eats: true,
  walk() {
    console.log("Animal walks");
  }
};

const rabbit = Object.create(animal);
rabbit.hops = true;

console.log(rabbit.eats); // true
rabbit.walk(); // "Animal walks"
console.log(rabbit.hops); // true

This process is called property lookup along the prototype chain:

JavaScript checks if the property exists directly on the object;
If not, it checks the object's prototype;
This process repeats up the chain until the property is found or the end is reached;
If the property is never found, undefined is returned.


              123456789
            
const animal = {
  eats: true
};

const rabbit = Object.create(animal);
rabbit.eats = false;

console.log(rabbit.eats); // false
console.log(animal.eats); // true

Tudo estava claro?

Obrigado pelo seu feedback!

Seção 2. Capítulo 1