Lära 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.

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 2

Fråga AI

Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal

Awesome!

Completion rate improved to 7.69

Svep för att visa menyn

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)

Var allt tydligt?

Tack för dina kommentarer!

Avsnitt 2. Kapitel 2