What is a prototype?

JavaScriptJunior~2 min read

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:

Looks for prop in the object obj itself.
If not found, looks in obj.[[Prototype]].
If it's not there either, keeps going up the prototype chain.
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

Short Answer

Interview ready

Premium

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