The Prototype
is the most confusing concept in Javascript
. Let’s understand it step by step.
Step 1: What is a Prototype?
Whenever we create an object
of any function in javascript, all the properties and methods of that function referring to this
will be inherited into the object
.
Quick example:
function Person(){ //Properties will be a part of object(s) this.name = "John Doe"; this.age = 23; this.printName = () => { return this.name, this.age; } //Properties will not be a part of the object(s) let gender = "Male" let dob = "31-12-1992" } //Print all values var obj = new Person(); console.log('name',obj.name) // John Doe console.log('age',obj.age) // 23 console.log('print name function',obj.printName()) // John Doe, 23 console.log('gender',obj.gender) // Undefined console.log('dib',obj.dob) // Undefined
In the above example properties
declared with this
keyword is inherited into an object. Properties and methods declared with this keyword are basically added into the prototype
which is Person.prototype
when we do something like:
Person.prototype.height = 5.5 Person.prototype.getHeight = () => { console.log(Person.prototype.height) } var obj = new Person() obj.height // 5.5 obj.getHeight() // 5.5
The above snippet is nothing but adding a new property into an existing function’s prototype, and these properties or methods will be available into an instance of an object (obj
).
2. What is Inheritance?
In Javascript, you can achieve Multi Level Inheritence
by using a prototype. What are we going to acheive now is if we have a function
Parent, and we have a function
Child, When we do objectOfChild instanceof Parent
then this should return true.
Let’s acheive it through an example!
We have function Parent
as shown in the snippet below:
function Parent(name, address) { this.fatherName = name || "unknown"; this.fatherAddress = address || "Unknown"; } //We have added this function into Parent prototype Parent.prototype.PrintParent = function () { console.log("In Parent",this); }
Now we have a function Child
which will inherits the property from the Parent. And instance of the Child will return true when we check it through the instanceOf keyword.
function Child(name, address) { This will inherits all the properties and methods of the parent Parent.call(this, "Nafees", "Delhi") this.childName = name this.childAddress = address } // This will make the Child instance of the Parent Child.prototype = new Parent(); //If constructor not set to a Child then Child constructor will automatically be a Parent Child.prototype.constructor = Child;
We will create one more function GrandChild
which will inherits the properties and methods of the Child. since Child has the property of the Parent then GrandChild will have the properties and methods of Child as well as from Parent.
function GrandChild(name, address) { Child.call(this, "Sufiyan", "Ghatkopar") this.grandChildName = name this.grandChildAddress = address } // Again, This will make the GrandChild instance of the Child GrandChild.prototype = new Child(); //If constructor not set to a grandchild then Grandchild constructor will automatically be a Child GrandChild.prototype.constructor = GrandChild; GrandChild.prototype.PrintGrandChild = function () { console.log("In Grand Child",this); }
The idea behind creating a three levels is to achieve three level inheritence from GrandChild
. Now when we do GrandChild instanceOf Child
this will return true, When we will do GrandChild instanceOf Parent
then this will return true.
Let’s see the out put of all the above code in One Shot.
var gc = new GrandChild("A","B"); console.log("Grand child object:",gc) //Output: GrandChild {fatherName: "Nafees", fatherAddress: "Delhi", childName: "Sufiyan", childAddress: "Ghatkopar"…} console.log("Grand child constructor:",gc.constructor) //Output: Grand child constructor: ƒ GrandChild() console.log("gc instanceof GrandChild:",gc instanceof GrandChild) //Output: gc instanceof GrandChild:true console.log("gc instanceof Child:",gc instanceof Child) //Output: gc instanceof Child:true console.log("gc instanceof Parent:",gc instanceof Parent) //Output: gc instanceof Parent:true var c = new Child("Sufiyan","Ghatkopar"); console.log("Child object:",c) //Output: Child {fatherName: "Nafees", fatherAddress: "Delhi", childName: "Sufiyan", childAddress: "Ghatkopar"…} console.log("Child constructor:",c.constructor) //Output: Child constructor: ƒ Child() console.log("c instanceof Parent:",c instanceof Parent) //Output: instanceof Parent: true console.log("c instanceof GrandChild:",c instanceof GrandChild) //Output: c instanceof GrandChild: false var p = new Parent("Nafees","Delhi"); console.log("Parent object:",p) //Output: Parent object:Parent {fatherName: "Nafees", fatherAddress: "Delhi"} console.log("Parent constructor:",p.constructor) //Output: Parent constructor: ƒ Parent() console.log("p instanceof Child:",p instanceof Child) //Output: p instanceof Child: false console.log("p instanceof GrandChild:",p instanceof GrandChild) //Output: p instanceof GrandChild: false
Complete code for the inheritence is given below:
Playground
Thank you!!