How are classes related to prototypes?

JavaScriptJunior~2 min read

1. A Class Is Just a Function

When you declare a class:

javascript

class User {
  constructor(name) {
    this.name = name;
  }

  sayHi() {
    console.log(`Hi, ${this.name}!`);
  }
}

JS turns it, under the hood, into something like:

javascript

function User(name) {
  this.name = name;
}

User.prototype.sayHi = function() {
  console.log(`Hi, ${this.name}!`);
};

In other words, class is a convenient wrapper around a constructor function and its prototype.

2. The Link Between a Class and Its Prototype

When you create an instance of a class:

javascript

const user = new User("Alice");

JS does the following under the hood:

Creates a new object: {}
Sets its prototype: User.prototype
Calls the constructor: User.call(this, "Alice")

In other words:

javascript

Object.getPrototypeOf(user) === User.prototype; // true

3. Class Methods Are Properties of `prototype`

javascript

console.log(Object.getOwnPropertyNames(User.prototype));
// ["constructor", "sayHi"]

Every method you write inside a class is automatically added to User.prototype, not to the instance object itself.

javascript

const u1 = new User("Alex");
const u2 = new User("Alice");

console.log(u1.sayHi === u2.sayHi); // true: one method shared by everyone

This is the key idea behind prototypes: all instances share common methods through prototype, so they don't get duplicated in memory.

5. Inheritance via `extends` = Prototypal Inheritance

javascript

class Animal {
  speak() {
    console.log("The animal makes a sound");
  }
}

class Dog extends Animal {
  bark() {
    console.log("Woof-woof!");
  }
}

const d = new Dog();
d.speak(); // works

Under the hood, the following happens:

javascript

// Links the prototypes
Dog.prototype.__proto__ = Animal.prototype;

// Links the constructors
Object.setPrototypeOf(Dog, Animal);

In other words, extends simply creates a prototype chain:

javascript

Dog.prototype → Animal.prototype → Object.prototype

6. The Prototype Chain With Classes

For example:

javascript

class A {}
class B extends A {}
const b = new B();

The chain looks like this:

javascript

b
↓
B.prototype
↓
A.prototype
↓
Object.prototype
↓
null

And for the constructors themselves:

javascript

B
↓
A
↓
Function.prototype
↓
Object.prototype
↓
null

7. Methods Work Through a Lookup Along the Prototype Chain

When you call b.sayHi(), the engine does the following:

Is sayHi on the b object itself? → No
It looks in B.prototype → Found it, calls it
If not found, it moves further up the chain (A.prototype, Object.prototype...)

8. Example: Confirming It in Code

javascript

class Animal {
  move() {}
}

class Dog extends Animal {
  bark() {}
}

const dog = new Dog();

console.log(Object.getPrototypeOf(dog) === Dog.prototype); // true
console.log(Object.getPrototypeOf(Dog.prototype) === Animal.prototype); // true
console.log(Object.getPrototypeOf(Animal.prototype) === Object.prototype); // true

All of this is the prototype chain, created automatically by extends.

9. A Class Isn't Magic, Just Syntactic Sugar

Here's the equivalent code without class:

javascript

function Animal() {}
Animal.prototype.move = function() {};

function Dog() {
  Animal.call(this);
}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;
Dog.prototype.bark = function() {};

const dog = new Dog();
dog.bark();

In other words, class simply makes this code nicer, automating the work with prototype and Object.create.

Summary

What	What the Class Does Under the Hood
`constructor`	Constructor function
Methods	Written to `Class.prototype`
`extends`	Links the prototypes (`Child.prototype → Parent.prototype`)
`super()`	Calls the parent's constructor
`instanceof`	Checks the prototype chain
Instance	Stores data, and takes methods from the prototype

In short:

Classes in JavaScript are convenient syntax on top of prototypes.

Every class creates:

a constructor function,

a prototype object with methods,

and an inheritance chain via __proto__.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.