Prototypal Inheritance vs Class Inheritance0%
Mixins & Object Composition

Prototypal Inheritance vs Class Inheritance

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Prototypal Inheritance vs Class Inheritance in Modern JavaScript

JavaScript's inheritance model is fundamentally different from classical object-oriented languages like Java, C++, or C#. While other languages utilize class-based inheritance (where classes are blueprints that instantiate copies), JavaScript relies on prototypal inheritance (where objects link directly to other objects via references).

1. Classical vs. Prototypal Inheritance

DimensionClassical Inheritance (Java, C++)Prototypal Inheritance (JavaScript)
Core EntityClasses are distinct types from instancesObjects inherit directly from other objects
InstantiationBlueprints copied to allocate instance memoryObjects created with links (__proto__)
Dynamic MutationClass definitions are immutable at runtimePrototypes can be extended or modified at runtime
TaxonomyDeep, rigid class hierarchiesFlexible delegation chains & composition
Output
Classical (Copy Blueprint):
Class Dog ──► creates instance [fido: name, bark(), eat()] (Copies structure)
 
Prototypal (Object Delegation):
Instance fido ──[[Prototype]]──► animalPrototype [eat()]
(fido delegates unresolved methods up the prototype chain!)

2. The Prototype Chain Mechanics

Every JavaScript object has an internal hidden link to another object, termed its [[Prototype]] (accessible via Object.getPrototypeOf(obj) or obj.__proto__).

When accessing obj.property:

  1. 1
    Does obj have its own property named property? If yes, return it.
  2. 2
    If not, inspect obj.[[Prototype]].
  3. 3
    If not found, inspect obj.[[Prototype]].[[Prototype]]...
  4. 4
    The chain terminates at Object.prototype.[[Prototype]] === null. If not found, evaluate to undefined.
JavaScript
const organism = { alive: true };
const mammal = Object.create(organism);
mammal.warmBlooded = true;
 
const dog = Object.create(mammal);
dog.breed = 'Golden Retriever';
 
console.log(dog.breed); // 'Golden Retriever' (Found on dog)
console.log(dog.warmBlooded); // true (Found on mammal prototype)
console.log(dog.alive); // true (Found on organism prototype)
console.log(dog.nonExistent); // undefined (End of chain reached)

3. How ES6 Classes Map to Prototypes

ES6 classes are syntactic sugar over prototypes:

JavaScript
class Vehicle {
drive() { return 'Vroom!'; }
}
 
// Exactly equivalent to legacy prototype syntax:
function VehicleLegacy() {}
VehicleLegacy.prototype.drive = function () { return 'Vroom!'; };
JavaScript
const v = new Vehicle();
console.log(Object.getPrototypeOf(v) === Vehicle.prototype); // true
console.log(typeof Vehicle); // "function" (Classes are functions under the hood!)

4. Checking Prototype Links: instanceof vs isPrototypeOf

JavaScript
class Shape {}
class Circle extends Shape {}
 
const c = new Circle();
 
// 1. instanceof tests if Constructor.prototype exists in object's prototype chain
console.log(c instanceof Circle); // true
console.log(c instanceof Shape); // true
console.log(c instanceof Object); // true
 
// 2. isPrototypeOf tests relationship between two objects directly
console.log(Shape.prototype.isPrototypeOf(c)); // true
Interactive Quiz

Practice Quiz

Question 1
What is the true nature of ES6 classes in JavaScript?
Question 2
What is the terminal node at the end of every standard JavaScript prototype chain?
Question 3
What method creates a new object with a specified prototype object?
Question 4
What does typeof ClassName evaluate to in JavaScript?
Question 5
What is the primary difference between Object.isPrototypeOf() and instanceof?
Next Lesson

Mixins & Object Composition

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Private Fields & Methods (#field)Mixins & Object Composition

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext