Suggest an edit

Improve this article

Refine the answer for “How are classes related to prototypes?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. Creates a new object: `{}`
2. Sets its prototype: `User.prototype`
3. 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.

---

## 4. Instances Share a Common Prototype

```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:

1. Is `sayHi` on the `b` object itself?
→ No
2. It looks in `B.prototype`
→ Found it, calls it
3. 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__`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts629 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.