Prototype in JavaScript

A prototype is an existing inbuilt functionality in JavaScript. Whenever we create a JavaScript function, JavaScript adds a prototype property to that function.

A prototype is an object, where it can add new variables and methods to the existing object. i.e., Prototype is a base class for all the objects, and it helps us to achieve the inheritance.

In this article, we will cover the following aspects of the JavaScript Prototype.

• What is the Prototype in JavaScript?
• When to use the prototype in JavaScript?
• How to add variables using the prototype in JavaScript?
• How to add methods using the prototype in JavaScript?

What is the Prototype in JavaScript?

As discussed, a prototype is an inbuilt object where it is associated with the functions by default, which can be accessible, modifiable and create new variables and methods to it and share across all the instances of its function.

When to use the prototype in JavaScript?

As we all know, Javascript is a dynamic language where we can add new variables and methods to the object at any point in time, as shown below.

function Student() {
    this.name = 'Sirugudi';
    this.class = '10';
}

var stdObj1 = new Student();
stdObj1.dob = "10/09/2015";
console.log(stdObj1.dob); // 10/09/2015

var stdObj2 = new Student();
console.log(stdObj2.dob); // undefined

As we see in the above example, the dob variable added to the stdObj1. But when we try to access the dob variable using the stdObj2 object, it doesn't have the dob variable because the dob variable is defined only in the stdObj1 object.

Now comes the question, Can there be a way that the new variable can be added to the function itself so as it is accessible to all the objects created using the function?

The answer to this question is the use of a prototype. A prototype is an invisible inbuilt object which exists with all the functions by default. The variables and methods available in the prototype object can be accessible, modifiable, and even can create new variables and functions.

How to add variables using the Prototype in JavaScript?

As discussed, there can be a time where we need to add the new variables to an existing object and we can achieve this with the help of the prototype. It follows the following syntax for adding a new variable

Syntax: ClassName.prototype.variableName = value;

Implementation:

function Student() {
    this.name = 'Sirugudi';
    this.class = '10';
}

Student.prototype.dob = "10/09/2015";// adding a variable
var stdObj1 = new Student();
console.log(stdObj1.dob); // 10/09/2015

var stdObj2 = new Student();
console.log(stdObj2.dob); // 10/09/2015

As we can see from the above example, we added a new variable "dob" to the existing function "Student", and the same was accessible on its instances "stdObj1 " and "stdObj2"

How to add methods using the Prototype in JavaScript?

Similar to the variables, sometimes, we need to add the methods. The same can be achieved in JavaScript using the prototype functionality. Its syntax looks like below

Syntax: className.prototype.functionname = ()=>{};

Implementation:

function Student() {
    this.name = 'Sirugudi';
    this.class = '10';
}

Student.prototype.dateOfJoining=()=>{return "06/06/2019"} //adding a method
var stdObj1 = new Student();
console.log(stdObj1.dateOfJoining()); // 06/06/2019

var stdObj2 = new Student();
console.log(stdObj2.dateOfJoining()); // 06/06/2019

In the above example, We are adding the "dateOfJoining" method to the existing function and invoked it on the instances "stdObj1" & "stdObj2"

Prototype Methods

The Object.setPrototypeOf() method in JavaScript is standard built-in objects which sets the prototype (i.e., the internal [[Prototype]] property) of a specified object to another object or null.

Syntax:Object.setPrototypeOf(obj, prototype)

Parameters: This method accept two parameters as mentioned above and described below:

• obj:This parameter is the object which is going to have its prototype set.
• Prototype:This parameter is the object’s new prototype. It can be an object or null object.

Implementation

let parents = { 
    father() { 
      return 'Williams'; 
    },
    mother() { 
      return 'Mary '; 
    }
  } 
  let children  = { 
    son() { 
      return 'David'; 
    } 
  } 

  Object.setPrototypeOf(children, parents); // prototype method

  console.log(children.father()); //Williams
  console.log(children.mother()); //Mary
  console.log(children.son()); //David

Key Takeaways

• When a user needs to add new properties like variables and methods at a later point of time, and these properties need sharing across all the instances, then the prototype will be very handy.
• The prototype can add both variables and methods to an existing function dynamically.
• A prototype is an object which associates with all the functions. Additionally, it is invisible, but all the properties inside the prototype are accessible.