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 family

function 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 family

class 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 family

function 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 family2

function 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.

Closing Notes– If you like codeum.io and would like to contribute, you can also write an article by sending a mail to me at contact@taniskjha.com or alternatively you can Dm me on Facebook or Twitter too.

See your article appearing on the codeum.io main page with over 10k Monthly Visitors and help other aspiring Developers.

Thanks for reading,If you have any questions , please ask questions in the comments below.

If this post was helpful, help me back by clicking the Share button.

More Posts:-

Step by Step plan that will Get You From ZERO to PASSING a coding interview (at Google, Facebook, Amazon)

Calling All New Developers. Understand How do JS closures work?

The Ultimate Guide to become a full stack web developer in 3 easy step

7 Amazing Array Methods to Boost your Javascript Skills Today

33 Most Powerful linux Commands To Run in Terminal

Who Else Wants to Clear confusion about Javascript Hoisting [Step-by-Step]

Tanisk jha

Mission-Driven Self taught Software Developer with a passion for thoughtful UI Design, collaboration and writing.
Tanisk jha

2 thoughts on “Allow this post to make you understand prototypal Inheritance

Leave a Reply

Your email address will not be published. Required fields are marked *