Suggest an edit

Improve this article

Refine the answer for “How does __proto__ differ from prototype?”. 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)

## In short

| Property | Where it lives | What it stores |
|---|---|---|
| `__proto__` | On the **object** | A reference to **its prototype** |
| `prototype` | On the **constructor function or class** | The object that becomes the **prototype for created objects** |

- `__proto__` → **of an already created object**
- `prototype` → **on the constructor (template) objects are created from**

---

## Example to understand it

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

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

const tim = new User('Tim');
```

Now let's see what happens:

```javascript
console.log(tim.__proto__ === User.prototype); // true
console.log(User.prototype.constructor === User); // true
```

Breakdown:

1. `User.prototype` is an object that holds methods (`sayHi`) and serves as the **prototype for all objects** created via `new User()`.
2. `tim.__proto__` is a **reference** to that very `User.prototype` object.

---

## Visually

```javascript
User (function)
│
├── prototype  ──►  { sayHi(), constructor: User }
│
└── new User('Tim')  →  tim {
                         name: 'Tim',
                         __proto__: User.prototype
                       }
```

That is, the `__proto__` of a created object points to the `prototype` of the function that created it.

---

## In plain terms

| Property | What it tells | Example |
|---|---|---|
| `prototype` | "What my children will get" | `User.prototype.sayHi = ...` |
| `__proto__` | "Who my parent is" | `tim.__proto__ === User.prototype` |

---

## Example with a chain

```javascript
function Animal() {}
Animal.prototype.eats = true;

function Dog() {}
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.barks = true;

const rex = new Dog();

console.log(rex.barks); // true (on Dog.prototype)
console.log(rex.eats);  // true (on Animal.prototype)
```

The chain looks like this:

```javascript
rex.__proto__ → Dog.prototype → Animal.prototype → Object.prototype → null
```

---

## Every object has `__proto__`,
while `prototype` exists **only on functions and classes**

```javascript
const obj = {};
console.log(obj.__proto__);       // Object.prototype
console.log(obj.prototype);       // undefined

function Foo() {}
console.log(Foo.prototype);       // { constructor: Foo }
console.log(Foo.__proto__);       // Function.prototype
```

Ordinary objects have no `prototype`, while constructor functions have **both**: `prototype` and `__proto__`.

---

## In modern practice

The `__proto__` property is considered **legacy**. Modern equivalents are recommended:

```javascript
Object.getPrototypeOf(obj); // instead of obj.__proto__
Object.setPrototypeOf(obj, proto); // instead of obj.__proto__ = proto
```

---

## Summary table

| Property | Where it's used | What it stores | When it applies |
|---|---|---|---|
| `__proto__` | on the **object** | a reference to its **actual prototype** | when you need to know "who is my parent" |
| `prototype` | on the **constructor function or class** | the object that becomes the **prototype for created objects** | when creating methods available to all instances |

---

## The key relationship

```javascript
instance.__proto__ === Constructor.prototype
```

> Every object created via `new Constructor()` gets a reference to `Constructor.prototype` in its internal `__proto__` property.

---

**In one phrase:**

> `prototype` is the "blueprint" or "template" that methods for new objects come from.
> `__proto__` is the object's "pointer" to that template, the one it inherits everything from.

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.