Object prototypes in JavaScript

The blog provides the details on the usage of Object ProtoTypes in JavaScript. The Object Prototype allows the objects to acquire the properties and features from each other.  Each Object created in JavaScript is automatically assigned with prototype object. 

The Object Prototype was introduced through ECMAScript 2015 and before that it was not possible to access any object’s prototype.

Why object prototype is required ?

The object prototype in JavaScript provides the inheritance by calling the object’s prototype which acts as a template to inherit the object’s methods and properties.

Using the prototype based approach, all objects which iterates with each other shares the same function and thus avoids the creation of copying the same function again.

The JavaScript Object is one of the JavaScript Data Types to store various keyed collections and complex entities. Whenever an object is created in JavaScript, it inherits the Default JavaScript Object properties and methods (defined in the Object.prototype)

Thus , Object.prototype.valueOf() , Object.prototype.toString() are available to each object that inherits from Object.prototype.

Object Prototype example

The below given is the object prototype example in JavaScript

<script>  
function Student(firstName, lastName, age, course) {
  this.firstName= firstName;
  this.lastName = lastName;
  this.age = age;
  this.course = course;
}
Student.prototype.fullName=function()  
  {  
    return this.firstName+" "+this.lastName;  
  } 
var student1=new Student("Mohit","Sharma", 28, "JavaScript");  
document.writeln(student1.fullName()+"<br>");  
document.writeln(student1.firstName()+"<br>"); 
document.writeln(student1.course()+"<br>"); 

</script>  

Here the Student1 inherits the object prototype properties from Student and Student inherits the object prototype properties from Object

Which means

Student1 -> Student -> Object

create() in object prototype

The below given is the example for create() used in object prototype

let student2 = Object.create(student1);

The create() allows to create a new object from the specified prototype object which means the student2 object is created using student1 as prototype object.

constructor property in object prototype

Every constructor function has a porotype property which points to the original object’s constructor property.

Let’s see the below example

let student3 = new student1.constructor('Rohit', 'Mehra', 26, 'JavaScript');
<script>  
function Student(firstName, lastName, age, course) {
  this.firstName= firstName;
  this.lastName = lastName;
  this.age = age;
  this.course = course;
}

Student.prototype.fullName=function()  
  {  
    return this.firstName+" "+this.lastName;  
  } 
var student1=new Student("Mohit","Sharma", 28, "JavaScript");  
document.writeln(student1.fullName()+"<br>");  
document.writeln(student1.firstName()+"<br>"); 
document.writeln(student1.course()+"<br>"); 

let student3 = new student1.constructor('Rohit', 'Mehra', 26, 'JavaScript');
document.writeln(student3.fullName()+"<br>");  
document.writeln(student3.firstName()+"<br>"); 
document.writeln(student3.course()+"<br>");

</script>  

The student3 object will print the values of the student1 object as it has inherited from student1

The constructor property allows you to return the name of the constructor it is an instance of

 student1.constructor.name