What is prototype property in JavaScript?

‘prototype’ property is an object, that is associated with every object in JavaScript by default.

For example,

HelloWorld.js

var obj = new Object();

console.log(obj);

When you ran above script, you can see below messages in console.

If you attach properties to a prototype property of a class, constructor function, then those properties are visible to all the instance of the class.

HelloWorld.js

Object.prototype.version = "1.23";
Object.prototype.author = "krishna";

var obj1 = new Object();
var obj2 = new Object();

console.log("Version " + obj1.version);
console.log("Author : " + obj1.author);

console.log("Version " + obj2.version);
console.log("Author : " + obj2.author);

Output

Version 1.23

Author : krishna

Version 1.23

Author : Krishna

Why should we attach properties to prototype object?

Let me try to explain with an example. Suppose, you are developing an application to the organization ‘ABC Corp’. You modeled the Employee class like below.

HelloWorld.js

function Employee(firstName, lastName, organization){
  this.firstName = firstName;
  this.lastName = lastName;
  this.organization = organization;
}

var emp1 =  new Employee('Krishna', 'Gurram', "ABC Corp");
var emp2 =  new Employee('Siva', 'Ponname', "ABC Corp");
var emp3 =  new Employee('Ram', 'Majety', "ABC Corp");

console.log(emp1);
console.log(emp2);
console.log(emp3);

Output

Object { firstName: "Krishna", lastName: "Gurram", organization: "ABC Corp" }

Object { firstName: "Siva", lastName: "Ponname", organization: "ABC Corp" }

Object { firstName: "Ram", lastName: "Majety", organization: "ABC Corp" }

As you see above snippet, you can observe that the organization has the value ‘ABC Corp’ for all the employees. Then why should we duplicate this value. We can attach the organization to the prototype property of the class Employee, so it will be visible to all the employees.

HelloWorld.js

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Employee.prototype.organization = "ABC Corp";

var emp1 =  new Employee('Krishna', 'Gurram');
var emp2 =  new Employee('Siva', 'Ponname');
var emp3 =  new Employee('Ram', 'Majety');

function printEmployeeInfo(emp){
  console.log("firstName : " + emp.firstName);
  console.log("lastName : " + emp.lastName);
  console.log("organization : " + emp.organization);
}

printEmployeeInfo(emp1);
printEmployeeInfo(emp2);
printEmployeeInfo(emp3);

Output

firstName : Krishna

lastName : Gurram

organization : ABC Corp

firstName : Siva

lastName : Ponname

organization : ABC Corp

firstName : Ram

lastName : Majety

organization : ABC Corp

What if one of the employee is working as a consultant from different organization. You can solve that by adding instance property to the employee object directly.

var emp1 =  new Employee('Krishna', 'Gurram');

emp1.organization = "XYZ Corporation";

HelloWorld.js

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Employee.prototype.organization = "ABC Corp";

var emp1 =  new Employee('Krishna', 'Gurram');
emp1.organization = "XYZ Corporation";

var emp2 =  new Employee('Siva', 'Ponname');

function printEmployeeInfo(emp){
  console.log("firstName : " + emp.firstName);
  console.log("lastName : " + emp.lastName);
  console.log("organization : " + emp.organization);
}

printEmployeeInfo(emp1);
printEmployeeInfo(emp2);

Output

firstName : Krishna

lastName : Gurram

organization : XYZ Corporation

firstName : Siva

lastName : Ponname

organization : ABC Corp

instance property vs prototype property

Instance property is specific to given object, whereas prototype property is attached to the class (or) function prototype property, and is available for all the objects.

HelloWorld.js

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Employee.prototype.organization = "ABC Corp";

var emp1 =  new Employee('Krishna', 'Gurram');
emp1.organization = "XYZ Corporation";

console.log(emp1);

Output

How to access prototype property?

If instance property and prototype property names are same, then you can use __proto__ property to access the prototype property of an object.

Example

emp1.__proto__.organization

HelloWorld.js

function Employee(firstName, lastName){
  this.firstName = firstName;
  this.lastName = lastName;
}

Employee.prototype.organization = "ABC Corp";

var emp1 =  new Employee('Krishna', 'Gurram');
emp1.organization = "XYZ Corporation";

console.log(emp1.organization);
console.log(emp1.__proto__.organization);

Output

XYZ Corporation

ABC Corp

Previous                                                 Next                                                 Home