• JavaScript Video Tutorials

JavaScript Object - prototype

The JavaScript Object prototype property allows you to add properties and methods to any object (Number, Boolean, String and Date etc.).

In JavaScript, the object prototype property is a global property which is available with almost all the objects.

Syntax

Following is the syntax of JavaScript Object prototype property −

object.prototype.name = value

Here, the name can be any property or any method name that you want to add to an object.

Parameter

  • It does not accept any parameter.

Return value

This property has no return value.

Example 1

Adding a property to an object using the prototype property.

In the following example, we are using the JavaScript Object prototype property to add a property named "marks" to an object named "student".

<html>
<head>
<title>JavaScript String length Property</title>
</head>
<body>
<script>
   function student(name, age){
      this.name = name;
      this.age = age;
   }
   const obj = new student("Rahul Verma", 22);
   //using prototype property to add a property
   document.write("Before adding the marks property: ", obj.marks);
   String.prototype.marks = null;
   obj.marks = 87;
   document.write("<br>Name: ", obj.name);
   document.write("<br>Age: ", obj.age);
   document.write("<br>After adding marks: ", obj.marks);
</script>
</body>
</html>

Output

The above program adds the marks property to an object.

Before adding the marks property: undefined
Name: Rahul Verma
Age: 22
After adding marks: 87

Example 2

Adding methods to the object using prototype property.

The following is another example of using the JavaScript Object prototype property. By utilizing this property, we add two methods named "display()" and "editCredential()" to an object. The "display()" method shows the admin credentials, while the "editCredential()" method allows editing of the admin credentials.

<html>
<head>
<title>JavaScript String length Property</title>
</head>
<body>
<script>
   function Admin(){
      this.username = "xyz@gmail.com";
      this.password = "abc@123";
   }
   //adding display function using prototype
   Admin.prototype.display = function(){
      document.write("Username: ", this.username, ", Password: ", this.password);
   }
   //adding editCredential function using prototype
   Admin.prototype.editCredential = function(username, password){
      this.username = username;
      this.password = password;
   }
   const a = new Admin();//calling the object using the Admin() class
   document.write("Admin Credential before edit:<br>");
   a.display();
   a.editCredential("admin12@gmail.com", "admin123");
   document.write("<br>Admin Credential after edit:<br>");
   a.display();
</script>
</body>
</html>

Output

After executing the above program, it will display the following result −

Admin Credential before edit:
Username: xyz@gmail.com, Password: abc@123
Admin Credential after edit:
Username: admin12@gmail.com, Password: admin123
Advertisements