Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How does JavaScript .prototype work?
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 variableExampleExample
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.
229 Views
