How does JavaScript .prototype work?

Front End TechnologyJavascriptWeb Development

In this example, we will learn how the prototype works in JavaScript. It is rare if a JavaScript developer doesn’t use the objects while developing the functions, and the objects can make a lot of work easy for developers.

The prototype is also the advanced concept associated with the objects in JavaScript. Many of you have heard about the prototypes for the first time but don’t worry. We will cover all things about the prototypes in this tutorial.

What does the prototype do?

The prototype is the object created for every function class when the program starts execution. However, it depends on the programmer whether they want to use the object prototype to make application code better readable or not.

By accessing the prototype of any function, we can change the properties. Using the example below, let’s understand why we need the prototypes in JavaScript.

For example, we have an object below.

let demo = {
   name: "tutorialsPoint";
}

Now, we want to create the 1000+ instances of this object with different values. The hard-working programmer will create a total of 1000 objects with different values. But the smart programmer will create a single function working like an object.

We can create a function to use as an object. If we add the ‘new’ keyword before the function call with arguments, it becomes the constructor, initializes all values for the object, and creates a new instance.

Syntax

Following is the syntax for using the function as an object −

function objectfunc(name, info) {
   this.name = name;
   this.info = info;
}
var object1 = new objectfunc( arguments );

Example

Creating Objects using Function Constructor

In the below example, we have created the constructor function to initialize the object. Furthermore, we have created the two objects with different values.

<html>
<head>
   <title> Working process of object.prototype. </title>
</head>
<body>
   <h2> Working process of object.prototype in javaScript. </h2>
   <h4> Values from differnt objects. </h4>
   <div id="objectValue"> </div>
   <script>
      let objectValue = document.getElementById("objectValue");
      // functional object
      function objectfunc(name, info) {
         this.name = name;
         this.info = info;
      }

      // object created with different values
      var object1 = new objectfunc("tutorialsPoint", "for computer science");
      var object2 = new objectfunc("cow", "an animal");
      objectValue.innerHTML = "The name in the object1 is " + object1.name + ". The info in the object1 is " + object1.info + ". ";
   </script>
</body>
</html>

Now, users can understand how easy to create thousands of objects if we have a functional constructor for the object. We can pass the key values of the object as an argument of the functional constructor and create a new object. If a programmer normally creates 1000 objects, it takes lots of hours.

Create Copies of Current Object

Also, programmers can pass the other object inside the Object.create() method to make copies of the current object.

Users can follow the below syntax to create a copy of current object.

let childObject = {
   name: "tutorialsPoint";
   info: "A computer science portal";
}

// creating the parentObject from the childObject
let parentObject = Object.create( childObject );

// adding other properties to the child object
parentObject.website = "tutorialsPoint.com"

How does the prototype work in JavaScript?

Now, we are on the main point; why do we need the prototype? Think about the scenario where you have multiple shared methods with different objects. Now, suppose that you have 50+ methods. Do you add all methods one by one in every different object? Not really! So, we create and add all methods to the function prototype. After that, we can add all methods of the function prototype to the object.

Users can follow the below syntax to use the prototypes with the functional objects.

function objectfunc(name, info) {
   let current = Object.create(objectfunc.prototype); // creates the object with all methods and variables of the objectfunc() prototypes
   current.name = name;
   current.info = info;
   return current;
}

// adding methods and variables to prototype
objectfunc.prototype.getInfo = function getInfo() {
   return this.info;
}
objectfunc.prototype.new_var = 10; // adding any new variableExample

Example

Working process of the Object prototype

In the below example, we demonstrate adding the methods and variables in the prototype object of the function. We have created the two different objects using the same method, which means we have shared all methods of the single prototype between two objects. Also, we have invoked the method using the objects.

<html>
<head>
   <title> Working process of object prototype. </title>
</head>
<body>
   <h2> Working process of Object prototype in JavaScript. </h2>
   <h4> Values from different objects. </h4>
   <div id="objectValue"></div>
   <script>
      let objectValue = document.getElementById("objectValue");
      // functional object
      function objectfunc(name, info) {
         let current = Object.create(objectfunc.prototype);
         current.name = name;
         current.info = info;
         return current;
      }
      objectfunc.prototype.getInfo = function getInfo() {
         return this.info;
      }
      objectfunc.prototype.getName = function getName() {
         return this.name;
      }
      // object created with different values
      var object1 = new objectfunc("tutorialsPoint", "for computer science");
      var object2 = new objectfunc("cow", "an animal");
      objectValue.innerHTML = "calling getName method for object1, output is " + object1.getName() + ". calling the getName method for object 2, output is " + object2.getName() + ". <br/>";

      // methods using from the prototype of objectfun(); // it shares the method
      let object3 = Object.create(objectfunc.prototype);
      object3.name = "foo";
      objectValue.innerHTML += "The name value for object3 is " + object3.getName();
   </script>
</body>
</html>

Conclusion

We hope that now users have cleared all doubt about the prototypes. A prototype is an object for every function, and users can store the method and variables inside the prototype object. Later, users can use it inside another object. It means it makes our work easy to share methods between two or more objects. Programmers don’t need to add all methods to an object one by one, but they can create a new object with the prototype of the old object, and that’s it.

raja
Updated on 22-Jul-2022 13:01:53

Advertisements