Loading, please wait...

A to Z Full Forms and Acronyms

What are Prototypes In JavaScript ?

The methods and facilities already given to the user in a defined object literal are called as prototype. They are already there present for us to carry different functions. It starts itself from a point which can vary according to the objects or constructor functions.

Prototypes In JavaScript

The methods and facilities already given to the user in a defined object literal are called a prototype. They are already there present for us to carry different functions. It starts itself from a point which can vary according to the objects or constructor functions. To understand this, one must know about the binding of objects and methods in a constructor as well as declaring an object on its own. Every object has a default template of rules which are known as prototypes.

Let’s get this by example:

let obj = {

    name: "zack",

    age: "19",

    address: "Mars"

}

 

In the above code, an object named obj is declared and when we will console log this object we can see that along with all the information inside the object getting on the screen there is __proto__ too.

 

These are the sets/templates already defined for the object and the prototype start from here itself that is object.prototyel. If we work on a constructor function to build up an object then we will see that the prototype starts from somewhere else that is from the constructor.

Example:

function Obj(givenName){

    this.name = givenName

}

let obj2 = new Obj(“zack”);

console.log(obj2);

Here the prototype states of two predefined templates one is for the constructor and another one is for the object inside it.

All the prototypes run down like chains and inherit from previous. For instance, the prototype shown for an object constructor with a method with the show its inheritance from the objects than to the constructor.

Apart from these, users can build up their own prototype too. This helps when we want to have objects inside and don’t want to alter them along with building a different method for it.

Example:

function Obj(givenName){

    this.name = givenName

}




let obj2 = new Obj('zack')




Obj.prototype.getName = function (){

    return this.name;

}




console.log(obj2)
In the above image, it is visible that a new set/ template is formed for the prototype. It can have user-defined sets of rules and functions.

NOTE: Always edit your own personal prototype.

Now let us run the new prototype we just declared.

obj2.getName();
We can see that it is working on our own defined template for the constructor for the object.

IMPORTANT: We can not change the prototype of the object itself, which means we cannot change or add the prototype of the obj object. It will show us an error if we try so, only the prototype of objects/methods inside a constructor can be changed.

Example:

let obj = {

    name: "zack",

    age: "19",

    address: "Mars"

}



function Obj(givenName){

    this.name = givenName

}



obj.prototype.getName = function (){

    return this.name;

}



let obj2 = new Obj('zack')

console.log(obj2)
A to Z Full Forms and Acronyms

Related Article