DevPrep
  • Interview Prep
  • Projects
  • Resources
  • Pricing
  • About Us
Submit Question
DevPrep
  • Pricing
  • About Us
Submit Question
  1. Home
  2. Articles
  3. Frontend Engineering
  4. JavaScript Prototypes: How Inheritance Really Works
XLinkedInReddit
MediumFrontend Engineering

JavaScript Prototypes: How Inheritance Really Works

D
DevPrep Team
February 10, 2026·1 min read·0
Table of Contents
  • The Prototype Chain
  • Constructor Functions
  • ES6 Classes (Syntactic Sugar)
  • Common Gotchas
  • Performance

JavaScript doesn't have classical inheritance — it has prototypal inheritance. Understanding the prototype chain is essential for interviews and debugging.

The Prototype Chain

Every object has an internal [[Prototype]] link. When you access a property, JS walks up the chain until it finds it or reaches null.

const animal = { eat() { return "eating"; } };
const dog = Object.create(animal);
dog.bark = function() { return "woof"; };

dog.bark(); // "woof" — found on dog
dog.eat();  // "eating" — found on animal (prototype)
dog.toString(); // found on Object.prototype

Constructor Functions

function Person(name) {
  this.name = name;
}
Person.prototype.greet = function() {
  return `Hi, I'm ${this.name}`;
};

const rahul = new Person("Rahul");
rahul.greet(); // "Hi, I'm Rahul"

// Chain: rahul → Person.prototype → Object.prototype → null

ES6 Classes (Syntactic Sugar)

class Person {
  constructor(name) { this.name = name; }
  greet() { return `Hi, I'm ${this.name}`; }
}

class Developer extends Person {
  constructor(name, lang) {
    super(name);
    this.language = lang;
  }
}
// Still prototypal under the hood!

Common Gotchas

  • Object.create(null) creates an object with NO prototype — no toString, no hasOwnProperty. Used for pure dictionaries.
  • hasOwnProperty vs in: in checks the chain, hasOwnProperty checks only the object
  • Modifying Array.prototype or Object.prototype affects ALL instances — never do this in production
  • __proto__ is deprecated — use Object.getPrototypeOf() and Object.setPrototypeOf()

Performance

V8 optimizes prototype lookups with hidden classes and inline caches. Long prototype chains (5+) can degrade performance. Keep inheritance shallow.

Related Articles

MediumFrontend Engineering

System Design #12: Design a Multi-Step Form Wizard

7 min read
MediumFrontend Engineering

Mastering Senior-Level JavaScript Interview Concepts

2 min read
MediumFrontend Engineering

System Design #9: Design a Collaborative Text Editor

9 min read

Comments (0)

Sign in to leave a comment.

No comments yet. Be the first to comment.

Table of Contents

  • The Prototype Chain
  • Constructor Functions
  • ES6 Classes (Syntactic Sugar)
  • Common Gotchas
  • Performance

Series

View all Frontend Engineering articles →

Practice

  • JavaScript
  • DSA
  • Machine Coding
  • System Design

Resources

  • Learning Tracks
  • Articles
  • Roadmaps
  • Compare Concepts
  • Glossary
  • Developer Tools
  • All Questions

Company

  • About
  • Pricing

Legal

  • Privacy Policy
  • Terms of Service
DevPrep

© 2026 DevPrep. All rights reserved.