Prototypal Inheritance - Object Oriented Javascript

... And the Rookie Robot asked again, "Hello random citizen number 982341, do you know what "Prototypal Inheritance" is? Can it charge my battery? ..." - Quick imagination of Suman Barick

It has always amazed me how JavaScript handles Inheritance via Prototypes. Well, if you search the net (and unluckily if you are new to JavaScript), in no time you will find yourself crushed beneath tons of cryptic explanations, and you will probably want to run away and never look back at Prototypal Inheritance ever.

But trust me, it is actually easy and fun.

In simple words, in JavaScript world every object has a property named “prototype” which holds the parent object of that object.

Got it? No? Ok don’t worry, we are only 2 minutes away from our destination.

Let see it in action...

Practice JavaScript in Browser Console. Browser console is probably the only tool you will ever need throughout your JavaScript programming career to quickly run any JS code to debug/study or just to clear a concept. Open your favorite browser in your computer (I recommend Google Chrome) and hit F12. See Console there? Here you can write and test/practice JavaScript code. Write/Copy paste the JavaScript code there and hit enter to see the results.

Let's create a class named Animal. In pre-ES6 world, there was only "function" and with it we could create all (Ok, almost all) the Magics of OOP. So..., [read the code comments]

[NOTE: This is a pre-ES6 world]

Let's create a class named Animal. In pre-ES6 world, there was only "function" and with it we could create all (Ok, almost all) the Magics of OOP. So..., [read the code comments]

Type the above code in your browser console and hit enter. "Animal" class and "animal" object will be created. Now type "animal" and hit enter, you will see something like

So, our animal has the behaviour "color" and also the method "speak" that we defined in our "Animal" class.

Now, let's create a class "Cow" as below

Now comes the fun part. We want "Cow" class to be a child class of "Animal" class so that all the properties of "Animal" are present in a "Cow". Now we will use the "prototype" property of Cow object (Well, conceptually we are treating "Cow" as a class, but actually it is a function... and in JS functions are themselves objects. JavaScript is an Object based language, see? No? Ok, I admit it takes some time to digest, but actaully it's very simple... You'll get it... Let's go back to Code).

Just remember, every object has a "prototype" property which holds its parent object. That's it, that's all...

Now type the following at console,

Done! Now "Animal" is officially a parent of "Cow". Let's see it by creating and inspecting a "cow" object. Type,

/* let's create a "cow" object */       
var cow = new Cow();

Our "cow" object is created. Now let's inspect it by typing "cow" in console and hitting enter. You should see something like this,

See, "__proto__: Animal" there? that's our cue that "cow" object inherits from parent "Animal" class / or animal object actually. Now if really "cow" inherits from "animal" object, it should also have "color" behaviour that we defined in "Animal" class. So, type them one by one, hit enter after each and see the result. Here is mine,

In JavaScript we have the instanceof operator which tests whether the prototype property of a constructor appears anywhere in the prototype chain of an object. Let's check if our cow object is an instanceof Cow and Animal objects

Here goes some more tests

... And here goes the results

Any question/suggestion? Let me know in the comments below...