ELI5-OOP

Today, I will be talking about the difference between classical OOP and prototypical OOP. This can be a very tricky topic to cover because javascript likes to where two different masks. So lets just jump right in and talk about classical inheritance. The first thing to look at is if your code block begins with Class followed by a capital letter that begins its name. This is your first indication you are dealing with a class and not prototypes. I like to think of a class as a blueprint on how an object is going to be built later. It can contain many properties and even methods. This blueprint can be used to create other similar objects while each object can still have its own unique properties. For example, lets say we are building a house. Some of its properties would be made of wood, has # windows, and has # doors. Knowing this we can make a instance of the house class using the “new” keyword to create a barn class. Now, we want the barn class to have all the properties that the house class has. This is very simple by saying house extends barn. By doing this barn now has access to all the properties house does and we can even give barn a few of its own unique properties like “has helipad on roof” which would be pretty cool. If we create a new instance of the barn class we can assign its values by passing them as arguments through the constructor. If you think about it we could say that the house class is the parent class and the barn class is the child class. The child class will inherit all the properties from the parent class while still having a few of its own unique attributes. This form of OOP is relatively new in ES6.

Lets now shift into talking about prototypical inheritance. Just like classical inheritance, prototypical inheritance has its own unique identifiers. An example would be replacing class with function followed by capital letter to start its name (function Spell). Another identifier is that you will not see a constructor like you did with classical inheritance. Its properties that you want it to have are just passed in as parameters and defined within the block. One major difference between the two is that if you add a new property or method to the parent class, it will affect all instances that are connected to the parent class. So lets say we wanted to add a new method to our parent class called “doors open” and assign it a value of true. By doing this, our barn class will now have this new method. Another difference with prototypical inheritance is how you make the connection between the parent class or in our example the house and the barn. Instead of rewriting the same code over and over we can simply call the house class and tell it what we want.

function House(wood, numDoors, numWindows, doorsOpen) { // parent
 this.wood = wood;
 this.numDoors = numDoors;
 this.numWindows = numWindows;
this.doorsOpen = true;

}

function Barn(wood, numDoors, numWindows, doorsOpen, helipad) {
House.call(this, wood, numDoors, numWindows, doorsOpen); 
 this.helipad = helipad; // now barn has everything parent does and can still be unique

}

Binding these two together is a little harder than classical inheritance. To do this we use this structure:

Barn.prototype = Object.create(House.prototype, {
 constructor : Barn
 }); //

So there is a little look at the differences between classical OOP and prototypical OOP. Take this knowledge and read into it a little deeper, it’s very interesting and useful knowledge to know. Heres something to think on.

*image courtesy of http://www.slideshare.net/joujiahe/javascript-oo-ps