JavaScript Inheritance - Do you know how it works?

TL;DR: JavaScript inheritance can be approached in two main ways: class-based and prototypal. Although the class keyword provides a familiar syntax for developers coming from OOP backgrounds, under the hood everything in JavaScript is based on prototypes. This article breaks down how inheritance works using both classes and constructors, clarifies the difference between methods and properties, explains prototype vs proto, and shows how to extend behavior using different techniques. If you're building objects that share behavior, understanding this will save you from duplicated code and maintenance nightmares. Introduction Last week, I published an article on Arrow Functions in JavaScript, and while many developers found it helpful, I noticed that some readers were still struggling with a few fundamental concepts of the language — like context, this, and how objects behave under the hood. That got me thinking: maybe it’s time we slow things down a bit and revisit some of JavaScript’s core mechanics. So I’ve decided to start a new series called “Do You Know How It Works?” — focused on demystifying the JS engine, one concept at a time. I’m officially considering the arrow functions article as Episode 0, and today’s post is Episode 1. Let’s kick things off with one of the most misunderstood (and overused) concepts in JavaScript: inheritance — both class-based and prototypal. ⚠️ Before We Dive In — A Quick Heads-Up Before we really get into the world of JavaScript, I want to share an important tip for anyone using these posts as a learning resource: Having a basic foundation in programming logic — especially from lower-level languages like C or C++ — can make a huge difference in how well you understand what's going on under the hood in JavaScript (and other high-level languages). While you don’t need to master all of these, I highly recommend at least being familiar with concepts like: Variable types and scopes Loops and conditional structures Functions and parameter passing Function scopes Arrays and multidimensional data Pointers and references Linked lists, trees, graphs, and dynamic programming Code complexity and algorithmic thinking Basic OOP principles Many of these fundamentals are abstracted away in modern languages like JavaScript, which can make it harder to see what’s really going on under the surface. That’s why having a solid foundation helps — you’ll learn faster, debug easier, and build with more confidence. With that in mind... let’s get started!

Apr 1, 2025 - 14:14

JavaScript Inheritance - Do you know how it works?

TL;DR:

JavaScript inheritance can be approached in two main ways: class-based and prototypal. Although the class keyword provides a familiar syntax for developers coming from OOP backgrounds, under the hood everything in JavaScript is based on prototypes. This article breaks down how inheritance works using both classes and constructors, clarifies the difference between methods and properties, explains prototype vs __proto__, and shows how to extend behavior using different techniques. If you're building objects that share behavior, understanding this will save you from duplicated code and maintenance nightmares.

Introduction

Last week, I published an article on Arrow Functions in JavaScript, and while many developers found it helpful, I noticed that some readers were still struggling with a few fundamental concepts of the language — like context, this, and how objects behave under the hood.

That got me thinking: maybe it’s time we slow things down a bit and revisit some of JavaScript’s core mechanics. So I’ve decided to start a new series called “Do You Know How It Works?” — focused on demystifying the JS engine, one concept at a time.

I’m officially considering the arrow functions article as Episode 0, and today’s post is Episode 1. Let’s kick things off with one of the most misunderstood (and overused) concepts in JavaScript: inheritance — both class-based and prototypal.

⚠️ Before We Dive In — A Quick Heads-Up

Before we really get into the world of JavaScript, I want to share an important tip for anyone using these posts as a learning resource:

Having a basic foundation in programming logic — especially from lower-level languages like C or C++ — can make a huge difference in how well you understand what's going on under the hood in JavaScript (and other high-level languages).
While you don’t need to master all of these, I highly recommend at least being familiar with concepts like:

Variable types and scopes

Loops and conditional structures

Functions and parameter passing

Function scopes

Arrays and multidimensional data

Pointers and references

Linked lists, trees, graphs, and dynamic programming

Code complexity and algorithmic thinking

Basic OOP principles

Many of these fundamentals are abstracted away in modern languages like JavaScript, which can make it harder to see what’s really going on under the surface. That’s why having a solid foundation helps — you’ll learn faster, debug easier, and build with more confidence.
With that in mind... let’s get started!