JavaScript Prototype (with Examples)

JavaScript Prototype

A prototype is an inbuilt object that its companies with functions by default, which can be affordable, adaptable, and invoke new variables and techniques to it and participate across all the representatives of its constructor function.

In JavaScript, a prototype is an object associated with any object created with a constructor function. A prototype object serves as a blueprint for an object that defines its properties and methods. It is used to add new properties and methods to all objects of the same type without adding them to every single object instance.

As we all know, JavaScript is a dynamic language where we can append new variables and techniques to an object at any point in time. Can there be a way that the new variable can be added to the function itself so that it’s accessible to all the objects created using the function?

The answer to this question is the use of a JavaScript prototype. We can affix a new variable or method to the object using the proto keyword. Now, let’s see some working executions of how to add new variables and methods using the JavaScript prototype functionality. There can be a time when we need to add new variables to a living object, which is nearly insolvable in other programming languages. But in JavaScript, we can attain this with the help of the prototype. It follows the succeeding syntax for adjoining a new variable: ClassName.prototype.variableName = value;

Let’s understand the operation of a JavaScript prototype to add a new variable with the help of the following illustration:

<script type = "text/javascript">

      function details(){

        this.website="Tools QA",

        this.language="Java Script"

      }

      var tutorails = new details();

      document.write(tutorails.website);

         document.write("</br>");

      document.write(tutorails.language);

      details.prototype.Author = "Arunkumar Chandra";

         document.write("</br>");

      document.write(tutorails.Author);

   </script>

Save the file with the nameprototypeVariable.html and open it in any browser. As we can see from the below illustration, we appended a new variable “Author” to the existing function “details”, and the same was accessible on the object “tutorials” after on.

Resembling the variables, sometimes, we need to add the methods for the existing object. The same can be attained in JavaScript using the prototype JavaScript functionality. Its syntax looks like the below: className.prototype.functionname = ()=>{

};

Let’s understand the application of JavaScript prototype to add a new method with the help of the following illustration:

<script type = "text/javascript">

      function details(){

      this.website="Tools QA",

        this.language="Java Script"

      }

     var tutorails = new details();

      document.write(tutorails.website);

         document.write("</br>");

      document.write(tutorails.language);

      details.prototype.Author = ()=>{

         return "Arunkumar Chandra";

      };

         document.write("</br>");

      document.write(tutorails.Author());

   </script>

Save the file with the nameprototypeMethods.html and open it in any browser. In the below illustration, we’re adding the “Author” method after the object is created and invoked it on the existing object “tutorials”.

So, this way, we can add new variables and methods to the existing object dynamically, which will be affordable to all the objects created using the function.