JavaScript - Prototype

Prototype is like a template in JavaScript. These template help object to share the properties and methods. Instead of duplicating code everywhere, we can define method or property once and then can easily share with other instances of an object.

Types of Prototype in JavaScript

In JavaScript, there are more than one type of prototype that are used to share the properties and methods among the objects. The main types of prototype in JavaScript are:

• Object Prototype
• Constructor Function Prototype
• Function Prototype
• Built-in Prototype

Object Prototype

The object prototype is foundational template to all objects in JavaScript. This template is available in every object we create by default. It is like built-in sheet of tool that every object can use.

Code Snippet

Following is an example snippet of using object prototype.

let obj = {

   name: "John",

   age: 21

};

console.log(obj);

console.log(obj.toString());  // [object Object]

Output

Following is the output of above code snippet −

{ name: 'Ansh', age: 24 }

In above example, we have created an object namedobjwith propertiesnameandage. We also have usedtoString()method which is available by default in object prototype.

Constructor Function Prototype

A construction function is type of function that is used for creating new objects. When we need to create multiple objects having same properties and behaviours, we can use constructor function. Constructor function prototype is used to share the properties and methods among the objects created using constructor function.

Code Snippet

Below is an example snippet of using constructor function prototype.

function Person(name, age) {

   this.name = name;

   this.age = age;

}

Person.prototype.greet = function() {

   return "Hello, " + this.name;

}

let person1 = new Person("John", 21);

let person2 = new Person("Ansh", 24);

Output

Following is the output of above code snippet.

Hello, John

Hello, Ansh

In above example, we have created a constructor function namedPerson. We also have added a methodgreetto the prototype ofPerson. We have created two objectsperson1andperson2usingPersonconstructor function and then called greet method on both objects.

Function Prototype

Function prototype is a template that is available to all functions in JavaScript. This template is used to share the properties and methods among the functions.

Code Snippet

Below is an example snippet of using function prototype.

function greet() {

   return "Hello, World!";

}

console.log(greet.toString());  // function greet() { return "Hello, World!"; }

Output

Following is the output of above code snippet.

function greet() { return "Hello, World!"; }

In above example, we have created a function namedgreet. We also have usedtoString()method which is available by default in function prototype.

Built-in Prototype

There are many built-in objects in JavaScript like Array, String, Number, etc. These built-in objects have their own prototype. We can use these prototypes to share the properties and methods among the objects of these built-in objects.

Code Snippet

Below is an example snippet of using built-in prototype.

let arr = [1, 2, 3, 4, 5];



console.log(arr);

console.log(arr.toString());  // 1,2,3,4,5

console.log(arr.join("-"));  // 1-2-3-4-5

console.log(arr.reverse());  // [ 5, 4, 3, 2, 1 ]

Output

[ 1, 2, 3, 4, 5 ]

1,2,3,4,5

1-2-3-4-5

[ 5, 4, 3, 2, 1 ]

In above example, we have created an array namedarr. We also have usedtoString(),join(), andreverse()methods which are available by default in array prototype.