How does prototypal inheritance work?

Brief Answer

Prototypal inheritance is the way objects in JavaScript inherit properties and methods from other objects. Unlike classical inheritance, there are no classes here — objects inherit directly from other objects through the proto link.

Full Answer

Prototypal inheritance is the main inheritance mechanism in JavaScript. It’s different from inheritance in other languages that have classes.

What is Prototypal Inheritance

Every object can have a prototype — another object from which it inherits properties:

const parent = { name: 'Parent' };
const child = Object.create(parent);
console.log(child.name); // 'Parent' — through prototype

How Inheritance Works

proto Link

const obj = {};
console.log(obj.__proto__); // Link to prototype

Inheritance Chain

// obj → Object.prototype → null
const obj = {};

Simple Examples

Creating with Prototype

const animal = { 
  type: 'animal',
  speak() { 
    console.log('I am ' + this.type); 
  } 
};
 
const dog = Object.create(animal);
dog.type = 'dog';
dog.speak(); // 'I am dog'

Method Inheritance

const parent = {
  greet() { return 'Hello!'; }
};
 
const child = Object.create(parent);
console.log(child.greet()); // 'Hello!' — method from prototype

Important Features

1. Property Search

const parent = { name: 'Parent' };
const child = Object.create(parent);
child.age = 25;
 
console.log(child.age); // 25 — own property
console.log(child.name); // 'Parent' — from prototype

2. Property Override

const parent = { name: 'Parent' };
const child = Object.create(parent);
 
// Override property
child.name = 'Child';
console.log(child.name); // 'Child' — own value

When to Use Prototypal Inheritance

For Extending Objects

// Base object
const vehicle = {
  move() { console.log('Moving'); }
};
 
// Extend it
const car = Object.create(vehicle);
car.wheels = 4;

For Memory Efficiency

// Methods in prototype — one copy for all
const parent = {
  sharedMethod() { /* logic */ }
};
 
const obj1 = Object.create(parent);
const obj2 = Object.create(parent);
// Both objects use one method

Common Mistakes

1. Confusion with Classes

// ❌ Thinking like classes
class Parent {}
class Child extends Parent {}
 
// ✅ In prototypal inheritance
const parent = {};
const child = Object.create(parent);

2. Changing Prototype After Creation

// ❌ Complex way
const obj = {};
Object.setPrototypeOf(obj, { name: 'New prototype' });
 
// ✅ Simple way
const parent = { name: 'Prototype' };
const child = Object.create(parent);

Simple Rules

Prototype — object from which properties are inherited
proto — link to object’s prototype
Object.create() — proper way to create with prototype
Search — first in object, then in prototype
Override — object properties override prototype

Prototypal inheritance is a powerful mechanism that underlies all objects in JavaScript.

Want more articles to prepare for interviews? Subscribe to EasyAdvice, bookmark the site and improve yourself every day 💪