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