JavaScript

Detailed Explanation of __proto__, prototype, and Inheritance Mechanism in JavaScript

Honghao Wang

— 2 min read

Introduction

Have you ever wondered why almost everything in JavaScript seems to behave like an object?

Or how inheritance really works under the hood?

And what’s the actual difference between `__proto__` and `prototype`?

These are fundamental but often confusing concepts.

In this tutorial, we’ll break down prototypes, the prototype chain, and inheritance so you’ll understand the what, why, and how of JavaScript’s object system.

---

What You’ll Learn

We’ll cover:

---

Prerequisites

You should be comfortable with:

  • JavaScript fundamentals
  • Objects, functions, and classes
  • Basic variable usage
  • Optional: experience with the `new` keyword

---

The String Method Mystery

Let’s start simple:

let name = "Shejan Mahamud";

name.toLowerCase(); // "shejan mahamud"
name.toUpperCase(); // "SHEJAN MAHAMUD"

Looks normal, right? But here’s the twist:

Strings are primitive types, not objects. So how can we call methods with dot notation?

The answer lies in how JavaScript wraps primitives in temporary objects to access methods from their prototypes.

---

How Objects Work Internally

Example:

const info1 = { fName: "Shejan", lName: "Mahamud" };
  • Every object automatically has a hidden `__proto__`.
  • By default, `__proto__` points to `Object.prototype`.
  • `Object.prototype` itself has `__proto__` set to `null` (top of chain).

Multi-level inheritance example:

const info1 = {
  fName1: "Shejan",
  lName1: "Mahamud"
};

const info2 = {
  fName2: "Boltu",
  lName2: "Mia",
  __proto__: info1
};

const info3 = {
  fName3: "Habu",
  lName3: "Mia",
  __proto__: info2
};
  • `info3` → `__proto__` → `info2` → `__proto__` → `info1`

---

Understanding the Prototype Chain

When accessing `info3.fName1`:

  • Check `info3` → no property found.
  • Follow `__proto__` to `info2` → no property found.
  • Follow `__proto__` to `info1` → found!

Prototype chain diagram:

info3 → __proto__ → info2 → __proto__ → info1 → __proto__ → Object.prototype → null

---

Why Everything in JavaScript Is an Object

When calling:

let yourName = "Boltu";
yourName.toLowerCase();

Behind the scenes:

  • JavaScript wraps `"Boltu"` in `new String("Boltu")`.
  • Sets wrapper’s `__proto__` to `String.prototype`.
  • Executes method.
  • Discards wrapper.

This applies for:

  • `Number.prototype` for numbers
  • `Boolean.prototype` for booleans
  • …and so on.

---

The Difference Between `__proto__` and `prototype`

`prototype`

  • Belongs to functions/classes.
  • Acts as a blueprint object for all instances created via `new`.

`__proto__`

  • Belongs to object instances.
  • Points to the prototype they inherit from.

Example:

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

Person.prototype.sayHi = function() {
  console.log("Hi, I'm " + this.name);
};

const p1 = new Person("Shejan");

console.log(p1.__proto__ === Person.prototype); // true
console.log(Person.prototype.constructor === Person); // true

---

How Prototypes Work with Functions

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.introduce = function() {
  console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
};

const person1 = new Person("Alice", 25);
const person2 = new Person("Bob", 30);

person1.introduce();
person2.introduce();
  • `introduce` exists only once in `Person.prototype`.
  • Both instances share this prototype → memory efficiency.

---

How Prototypes Work with Classes

class User {
  constructor(name) {
    this.name = name;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name}`);
  }
}

const user1 = new User("Charlie");
user1.sayHi();
  • Classes are syntactic sugar.
  • Internally, still use `prototype` and `__proto__`.

---

Conclusion

Core Points

  • `__proto__` exists on objects; points to their prototype.
  • `prototype` exists on functions/classes; used to create shared properties/methods for instances.
  • Prototype chain lets properties/methods be found up the chain until `null`.
  • Primitives use temporary wrapper objects to access methods.
  • Classes are syntactic sugar over the prototype system.

Understanding this model is key to using and debugging JavaScript effectively.

---

Pro Tip: If you create technical tutorials like this and want to publish across multiple platforms efficiently, check out AiToEarn官网. It’s an open-source global AI content monetization platform that integrates AI content generation, cross-platform publishing (Douyin, Kwai, WeChat, Bilibili, Rednote, Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, X/Twitter), analytics, and model ranking — giving creators a unified workflow to share and monetize knowledge just like prototypes offer a uniform structure to objects in JavaScript.

---

Happy coding!

Read more