Suggest an edit

Improve this article

Refine the answer for “What is a 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)

**A prototype** is **JavaScript's inheritance mechanism**,
through which **some objects can inherit properties and methods from other objects**.

This is the foundation of **prototypal inheritance**, on which all of object-oriented JS is built.

---

## In short

Every object in JavaScript has a **hidden reference** to another object -
this is its **prototype**.

This reference is stored in a special internal property:

```javascript
[[Prototype]]
```

(accessible via `__proto__` or `Object.getPrototypeOf()`)

---

## Example

```javascript
const user = {
  sayHi() {
    console.log('Hello!');
  }
};

const admin = Object.create(user); // create an object that inherits from user

admin.sayHi(); // "Hello!"
```

Here:

- `admin` does not have its own `sayHi` method;
- but when `admin.sayHi()` is accessed, JS looks for this method **in the prototype (**`user`**)**.

---

## How the prototype chain works

When you access `obj.prop`, the JS engine does the following:

1. Looks for `prop` in the object `obj` itself.
2. If not found, looks in `obj.[[Prototype]]`.
3. If it's not there either, keeps going up the prototype chain.
4. If it reaches `null`, it returns `undefined`.

This is called the **prototype chain**.

---

## Example with a chain

```javascript
const animal = { eats: true };
const dog = Object.create(animal);
dog.barks = true;

console.log(dog.barks); // true  (on its own object)
console.log(dog.eats);  // true  (inherited from animal)
console.log(dog.toString); // [Function: toString] (inherited from Object)
```

`dog` -> `animal` -> `Object.prototype` -> `null`
This is the **prototype chain**.

---

## Let's check who is whose prototype

```javascript
console.log(Object.getPrototypeOf(dog) === animal); // true
console.log(Object.getPrototypeOf(animal) === Object.prototype); // true
```

---

## Prototype and constructor functions

When you create an object via `new`,
its prototype becomes the constructor function's `.prototype` property:

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

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

const tim = new User('Tim');
tim.sayHi(); // "Hello, Tim"
```

Under the hood:

- `new User()` creates a new object;
- that object gets `[[Prototype]] = User.prototype`.

---

## Let's check

```javascript
console.log(Object.getPrototypeOf(tim) === User.prototype); // true
```

---

## Example: built-in prototypes

Almost everything in JS is based on prototypes

```javascript
const arr = [1, 2, 3];
console.log(Object.getPrototypeOf(arr) === Array.prototype); // true
console.log(Object.getPrototypeOf(Array.prototype) === Object.prototype); // true
```

That is:

```javascript
arr → Array.prototype → Object.prototype → null
```

---

## The modern equivalent - `class`

The `class` syntax in JavaScript is just "sugar" over prototypes:

```javascript
class User {
  sayHi() {
    console.log('Hello!');
  }
}

const tim = new User();
tim.sayHi(); // "Hello!"
```

Under the hood, `class` does the same thing:
it creates a function and sets up prototypes via `User.prototype`.

---

## Summary

| Term | Description |
|---|---|
| **Prototype** | The object from which another object inherits properties |
| **[[Prototype]]** | The internal reference to that object |
| **Prototype chain** | The sequential lookup of a property up the chain |
| **Object.getPrototypeOf(obj)** | Get an object's prototype |
| **Object.setPrototypeOf(obj, proto)** | Change the prototype |
| **Object.create(proto)** | Create an object with the given prototype |

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

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.