Aprende Prototypal Inheritance | Prototypes, Inheritance, and the this Keyword

Prototypal inheritance is a powerful feature in JavaScript that allows you to create new objects that inherit properties and methods from existing objects.

You can directly link objects together, share behavior, and update prototypes dynamically. This flexibility encourages code reuse and makes it easier to create variations of objects without duplicating code.


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

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

console.log(rabbit.eats); // true (inherited from animal)
rabbit.walk(); // "Animal walks" (inherited method)
console.log(rabbit.hops); // true (own property)

In this example, the animal object serves as a prototype. You create a new object rabbit using Object.create(animal), which sets animal as the prototype of rabbit. When you access rabbit.eats, JavaScript does not find the property directly on rabbit, so it looks up the prototype chain and finds it on animal. The same happens with the walk method. However, the hops property is unique to rabbit and not inherited.


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

const rabbit = Object.create(animal);

animal.sleep = function() {
  console.log("Animal sleeps");
};

rabbit.sleep(); // "Animal sleeps" (inherited from animal)

rabbit.walk = function() {
  console.log("Rabbit hops instead of walking");
};

rabbit.walk(); // "Rabbit hops instead of walking" (overrides prototype method)
animal.walk(); // "Animal walks" (original method remains unchanged)

A best practice when using prototypal inheritance is to define shared behavior on the prototype object, so all derived objects can access it without duplication. You can add new methods to the prototype even after objects have been created, and all inheriting objects will gain access to them. If you need to customize behavior for a specific object, you can override inherited methods by defining them directly on that object, leaving the prototype untouched.

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 2

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Suggested prompts:

Can you explain how method overriding works in this example?

What happens if I add a new property to the prototype after creating the derived object?

Can you show more examples of prototypal inheritance in JavaScript?

Awesome!

Completion rate improved to 7.69

Desliza para mostrar el menú

Prototypal inheritance is a powerful feature in JavaScript that allows you to create new objects that inherit properties and methods from existing objects.


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

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

console.log(rabbit.eats); // true (inherited from animal)
rabbit.walk(); // "Animal walks" (inherited method)
console.log(rabbit.hops); // true (own property)


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

const rabbit = Object.create(animal);

animal.sleep = function() {
  console.log("Animal sleeps");
};

rabbit.sleep(); // "Animal sleeps" (inherited from animal)

rabbit.walk = function() {
  console.log("Rabbit hops instead of walking");
};

rabbit.walk(); // "Rabbit hops instead of walking" (overrides prototype method)
animal.walk(); // "Animal walks" (original method remains unchanged)

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 2. Capítulo 2