Prototypal Inheritance - Object Oriented JavaScript

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. [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]

          
          /* Let's define an Animal Class */
          function Animal () {
            this.color = "Black";
            this.speak = function () {
              console.log("I can't speak...");           
            }
          }

          /* Now let's create an animal object */
          var animal = new Animal();
          
        

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

          
          /* let's define the Cow Class */
          function Cow () {
            this.type = "Domestic";
            this.speak = function () {         
              console.log("Moooo...");      
            }
          }
          
        

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,

          
          Cow.prototype = new Animal();     

          /* or we could also write     
           * Cow.prototype = animal;     
           * since we have already created an "animal" object
           */     
          
        

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, Any question/suggestion? Let me know in the comments below...