The prototype object is used to add property and methods to the objects. The prototype object can be used on any custom objects. Before creating a new object, prototype object has to be attached before the object name. Prototype is a global property which is present in almost all objects. The Object.prototype is used to create a new objects prototype where anyone can define a new property on it. Its goal is to add methods and set of properties to the object prototype property.
JavaScript Prototype Object Syntax
Object.prototype.name= value
JavaScript Prototype Object Example
<!DOCTYPE html> <head> <script type="text/javascript"> function bike(company, name) { this.company = company; this.name = name; } </script> </head> <body> <script type="text/javascript"> var mybike = new bike("Bajaj", "Pulsar"); bike.prototype.price= null; mybike.price= 75000; document.write("Name of the company: " + mybike.company + "<br>"); document.write("Name of the bike: " + mybike.name+ "<br>"); document.write("Price of the bike: " + mybike.price); </script> </body> </html>
- In this example we have shown how prototype object is been used in this program.
- We have defined function called bike by passing parameters and referring the current values by using “this” keyword and later we are creating custom object called “bike” using new keyword. We have used object Prototype to add price value in the program.
- function bike(company, name) is used to define the unique function name and the parameter is been passed in function i.e. company and name.
- this.company = company;
this.name = name; is used to refer the current value by using “this” keyword. - var mybike = new bike(“Bajaj”, “Pulsar”); line contains variable name called “mybike” and created object called “bike” by using “new” keyword and we are passing the parameter values to that object.
- bike.prototype.price= null;is used to add custom property to object.
- mybike.price= 75000; is used to assign the value of the bike.
JavaScript Prototype Object Demo
- Save the file as object_prototype.html in your system.
- Just open the file in the browser, you will see the below picture in the browser.