Allow this post to make you understand prototypal Inheritance

“I recently failed in an assessment. Yes, the scary F word.

But I don’t look at this failure as an anchor. I look at this as an opportunity for growth.

3 months back my good old friend Nazim failed to understand prototypal Inheritance.

Next day he called me and asked, Am i smart enough to be programmer?.

Nazim and all aspiring developers, When its comes to learning difficult programming concept, Repetition Is the Key.

So, Let’s dive deep on understanding what is Inheritance ?

A lot of inheritance blog on internet uses all kinds of crazy examples with trees and babies to make you understand inheritance.

I think it’s better just to directly say what inheritance does :-

When You have a class, And you have another class,

And when you can go and get access to the properties and methods on that other class it’s called Inheritance.

Makes sense? If not, than you should first read my post on objects, 3 weird ways to create JavaScript objects (Learn my tricks Now)

Before we look at how prototypes are used to inherit functionality.

First Let’s Create a user-defined object using function and than Create an instance of the object using new keyword.

Example #1- Create Function Object Using new Keyword

//  let's create a new function, i'll call it familyfunction family(father, mother, wife, daughter, sister) {
   this.father = father;
   this.mother = mother;
   this.wife   = wife;
   this.daughter = daughter;
   this.sister  = sister;
}
// Now i'm going to create/instance two object john and syam using new keyword.const John = new family('rob', 'Margie', 'Alicia', 'Ellie', 'lara')const Syam = new family('Nath', 'Seema', 'Sara', 'Priya', 'anita')console.log(John);// Expected Output of john :-
​
family { father: "rob",
        mother: "Margie",
        wife: "Alicia",
        daughter: "Ellie",
        sister: "lara" }console.log(Syam);// Expected Output of syam:-
​
family { father: "Nath",
        mother: "Seema",
        wife: "Sara",
        daughter: "Priya",
        sister: "anita"}

After creating the function we have used new keyword to create a new Object John and syam.

And this variable inside function family is pointing to the newly created object john and syam.

if you want to learn how this keyword works under the hood, read my post on this keyword This Keyword In JavaScript with 3 Easy Examples

Since ECMAScript 2015 release, We can use Class based Inheritance In JavaScript, Which are primarily a syntactical sugar over JavaScript’s existing prototype-based inheritance.

So, Now let’s look at another easy example of how ECMAScript classes are used to Create an Object

Example- #2- Create class using new keyword

//  let's create a new class, I'll again call it familyclass family {
 constructor(father, mother, wife, daughter, sister) {
 
   this.father = father;
   this.mother = mother;
   this.wife   = wife;
   this.daughter = daughter;
   this.sister  = sister;
}}
// Now i'm going to create two new object federico and jorge using new keyword.const federico = new family('rob', 'Margie', 'Alicia', 'Ellie', 'lara')const jorge = new family('Nath', 'Seema', 'Sara', 'Priya', 'anita')console.log(federico);// Expected Output of federico :-
​
family { father: "rob",
        mother: "Margie",
        wife: "Alicia",
        daughter: "Ellie",
        sister: "lara" }console.log(jorge);// Expected Output of jorge:-
​
family { father: "Nath",
        mother: "Seema",
        wife: "Sara",
        daughter: "Priya",
        sister: "anita"}


        In the example above we have used the constructor method which is a special method for creating and initialising an object created within a class.

I’ll repeat again, The class syntax does not introduce a new object-oriented inheritance model to JavaScript,

its just a syntactical sugar over JavaScript’s existing prototype-based inheritance

So, far in 2 examples above we’ve talked about creating object using new keyword , Now let’s look at how prototypes are used to inherit functionality.


Example #3– Prototypal Inheritance Using Class

// let's create a function object, I'll again call it familyfunction Family(father, mother, wife, daughter, sister) {
   this.father = father;
   this.mother = mother;
   this.wife   = wife;
   this.daughter = daughter;
   this.sister  = sister;
   
}// let's create another function object, I'll again call it family2function Family2(father, mother, wife, daughter, sister, brother) {
  // inheritence by call method
 Family.call(this, father, mother, wife, daughter, sister)
 this.brother = brother;  
}const jon = new Family('rob', 'Margie', 'Alicia', 'Ellie', 'lara');
​
​
const ron = new Family2('Nath', 'Seema', 'Sara', 'Priya', 'anita', 'Trump');console.log(jon);// Expected Output -Family {father: "rob", mother: "Margie", wife: "Alicia", daughter: "Ellie", sister: "lara"}console.log(ron);.

// Expected Output -Family2 {father: "Nath", mother: "Seema", wife: "Sara", daughter: "Priya", sister: "anita",}

In the example 4 we’ll see how we can use prototype chain is used to inherit functionality.

So before that What is Prototype Chain ?

When an attribute is called on an object, the object is first checked for that attribute, and if it doesn’t exist, then each link in its prototype chain is traversed until the attribute is found

Example #4- Prototypal inheritance using Prototype Chaining

function PrintMyPassport(myPassport) {
this.documents = myPassport;
}// We add the print () method to PrintMyPassport prototype property so that other instances (objects) can inherit it:PrintMyPassport.prototype.print = function() {
console.log(this.documents);
}// Create a new object with the PrintMyPassport () constructor, thus allowing this newPass object to inherit PrintMyPassport's properties and methods.var newPass = new PrintMyPassport("I am a new Object and I can print your passport.");// newPass inherited all the properties and methods, including the print method, from the PrintMyPassport function. Now newPass can call print directly, even though we never created a print () method on it.
​
newPass.print(); //I am a new Object and I can print.

Thanks for reading, Happy Hacking