What are Prototypes?

In simple words, prototype is a mechanism by which objects get superpowers in javascript. Technically, it is the mechanism by which JavaScript objects inherit features from one another.

Let's try to understand the prototype using examples,

//Let's create a simple array
const frameworks = ["React", "Vue", "Angular", "Next"];

Now, head to the browser console to see what stuff the javascript array returns us.

Firstly, their elements of array and length are present. The last option shows Prototype. Let's expand it to see what it contains.

There is a big list of properties that are binded to the array prototype. It contains functions that are defined as an array prototype and each array has access to it.

Note: Everything in javascript is an object.

Basically, every object has a prototype that contains the list of functions and properties defined for objects. These objects can be arrays, strings, sets, maps etc. Each of them has its own prototype which is accessible to every object of its kind.

**Try to focus on the last arrow in the image, it further shows **Prototype : object, which means that it further contains the object prototype and hence object properties will also be accessible here.

Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what's called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

We can access the prototype directly using ___proto__ .

Depicting the prototype chaining

End of prototype chaining for the array.

When you try to access a property of an object: if the property can't be found in the object itself, the prototype is searched for the property. If the property still can't be found, then the prototype's prototype is searched, and so on until either the property is found, or the end of the chain is reached, in which case undefined is returned.

Let's consider an example of an object obj1.

// Object
const obj1 = {
    name:"Deepak",
    score:20,
    getScore : function() {
        return this.score;
    }
}

How can we add custom methods in prototypes?

Let's suppose we need to add a method in the object prototype that prints "Hey! I am a custom added method". If we successfully add it to the object prototype then each object in the script will be able to access it.

Object.prototype.customMethod = function(){
    console.log("Hey! I am a custom added method");
}

Now, a method named customMethod is added to the prototype of object an any object can access it. Let's go to browser console.

Here, customMethod is added to the object prototype and can be accessed by every object. Below is the output of customMethod when invoked with obj.

Adding method to array prototype:

Array.prototype.heyArray = function(){
    console.log(`Total elements are ${this.length}`);
}

Now, function heyArray is available to use in every array because it is added into the array prototype.

Prototype Inheritance

Prototypes are a powerful and very flexible feature of JavaScript, making it possible to reuse code and combine objects. Let's consider three independent objects User, Teacher and TeachingSupport.

const User = {
    name: "top name",
    email: "example@gmail.com"
}

const Teacher = {
    makeVideos: true
}

const TeachingSupport = {
    isAvailable: false
}

Now, we will inherit the prototype of User in Teacher.

 Object.setPrototypeOf(Teacher, User)

With the above line of code, the User is inherited as prototype in Teacher.

Teacher has inherited the user as the prototype. Inheriting Teacher as a prototype in TeachingSupport.

Object.setPrototypeOf(TeachingSupport, Teacher)

Thus, both User and Teacher are inherited as separate prototype inside TeachingSupport.

Summary

This article has covered JavaScript object prototypes, including how prototype object chains allow objects to inherit features from one another, the prototype property and how it can be used to add methods to constructors, and other related topics.