loading...

Prototypal Inheritance In JavaScript

tarun_geek profile image Tarun Nagpal ・2 min read

I have recently gone through some of the roots in JavaScript. It always fruitful when you look back to the basics of any Language. No matter you are an expert in React and Redux

You can also check out my blog on JavaScript basics for React developers

There were a couple of questions in my Mind like

  • What is Prototype in JS?

  • What is Prototypal Inhertictane? How it is different from OOPS Inhertictane.

  • How does Class work in JS?

In order to get all the answers, I created a small program on both the JS versions (Es5 and ES6).

Doing a practical will give you more understanding than reading and watching videos.

So let's get started.

Inheritance in Older Version

  • Step 1

Create a function(Tile) which will act as a base class.

  • Step 2

Create a function(PushableTile) which will act as a Child class.

  • Step 3

Assign the Prototype of Base class to Child class prototype.

  • Step 4

Add methods to the child class, we will use it to access the Parent Class.

  • Step 5

Create an Object from Child Class

// Base Class 
function Tile (x,y,type){
    this.x = x;
    this.y = y;
    this.type = type;
}


// Child Class
function PushableTile(x, y, type) {
    Tile.call(this, x, y, type);
}

// Inheritence 
PushableTile.prototype = Object.create(Tile.prototype);

// Add Methods to the child class 
PushableTile.prototype.push = function(x, y) {
    this.x += x;
    this.y += y;
};

var object = new PushableTile(100,200,300);

Inheritance in New JS Version

Step 1

Create a base class (Tile) with a constructor.

Step 2

Create a Child class with the constructor.

Step 3

Add Super to the Base Class. It will help to pass the same parameters to the Parent class.

Basically, it is doing the same thing as the below code is doing.

javascript Tile.call(this, x, y, type);

Step 4

Add methods to the Child class.

Step 5

Create an Object from Child Class

// Base Class 
class Tile {
     constructor(x,y,type){
        this.x = x;
        this.y = y;
        this.type = type;
        console.log("CONSTRUCTOR");
     }
}

// extends is same as PushableTile.prototype = Object.create(Tile.prototype);
class PushableTile extends Tile{
    constructor(x, y, type) {
      // Tile.call(this, x, y, type);
      super(x, y, type);
    }

    push(x, y) {
        this.x += x;
        this.y += y;
    }
}

const object = new PushableTile(100,200,300);

Posted on by:

tarun_geek profile

Tarun Nagpal

@tarun_geek

I am a full stack developer and traveller

Discussion

pic
Editor guide
 

JS only has prototypal inheritance. What appears to be familiar class based inheritance is really only syntactic sugar on top of the prototype model underneath

 

Yes you are right.

New JavaScript developers should have a look at this closely.

It clarify all the things under the hood.