How does JavaScript .prototype work ?

In JavaScript when adding behaviour to objects, then if creating multiple objects using the constructor (calling the constructor function with the ‘new’ keyword) then the new keyword is the one that is converting the function call into constructor call and every time a brand new empty object is created which create inconsistency because for each object separate copy of function created.  So if create 1,000 objects then 1,000 copies of function get created and this creates memory wastage.

So for this reason prototype comes into this picture. 

Prototype: It is a simple way to share behaviour and data between multiple objects. The prototypes are the property of the Object constructor.

Syntax:

Object.prototype

All the objects created in JavaScript are instances of ‘Object’. Therefore, all of them share the  ‘Object.prototype’ method. We can also override these properties.

Why do you need prototypes? 

Sometimes there is a need to add new properties (or methods) to all the existing objects of a given type. This is only possible by adding the new method to the prototype function.

let’s understand How the prototype works?

So for every function, two objects are created one for that and another one for its prototype. Every function has its properties prototype, these properties make it to the prototype of the function, so creating objects from this function by calling it in constructor mode whatever objects created will be the prototype of prototype template that means objects follow the template of prototype whatever properties or behaviour mention in prototype, objects will able to access those properties. It can be more clear using the below diagram.

How Prototype works ?

Function_name.prototype: It gives a prototype of the function. If want to go back from prototype to function there are properties mentioned in Prototype i.e, Constructor in that case Function_name.prototype.constructor take back to function.

Example 1:

Javascript

// Constructor
function vehicle(numWheels, price) {
    this.numWheels = numWheels;
    this.price = price;
    this.getPrice = () => {
        return this.price;
    }
}

var vehicle1 = new vehicle(10, 378979);
var vehicle2 = new vehicle(36, 899768);

// function.prototype works
vehicle.prototype

// function.prototype.constructor works
vehicle.prototype.constructor

Output:

Function_name.prototype

Here vehicle.prototype gives a prototype of a vehicle function.

Function.prototype.constructor

Here vehicle.prototype.constructor gives the same function which prototype it is like in this case vehicle functions so it gives that function as output.

Objects inherit properties from the prototype:

So all the objects that are created will have an internal reference to a prototype which means for every function there is one copy and all objects share that copy no need to create separate copy means adding behaviour to function instead of access behaviour from the prototype (example getprice() function is behaviour) so calling it from prototype does not get store in function. 

Example 2:

Javascript

//constructor
function vehicle(numWheels, price) {
    this.numWheels = numWheels;
    this.price = price;
}

// Adding behaviour to constructor vehicle
vehicle.prototype.getPrice = function () {
    return this.price;
}

var vehicle1 = new vehicle(5, 100000);
var vehicle2 = new vehicle(10, 390000);

// Function or constructor
vehicle

// function.prototype works
vehicle.prototype

// function call using object
vehicle1.getPrice();

Output:

function

Here constructor does not contain getprice() function within it because it cannot take space inside the functioning vehicle.

function.prototype

But vehicle function prototype contain getprice() function as its properties.

object

vehicle1 object also have getprice() function within its prototype. so it can access easily getPrice() function.

object.prototype

Here like getprice() is not taking space in vehicle function but objects able to access getprice() using the prototype. Although getprice() is within the prototype of the function. 

.prototype more uses:  It is also used for adding properties at runtime. so that every object have one common property. like if there are 1000 vehicles and all have the same model number. This lookup works first it goes to find it in the object then it goes to prototype to search this property.