Prototypal Inheritance 1: I see a light!

Prototypal Inheritance and Object-oriented programming are two of the most used and most misunderstood terms when it comes to Javascript.
Here I will try to shed some light on it.

[ The content of this article is my take home from the great book of Kyle Simpson this & Object Prototypes Prototypes of the series "You don't know JS", i really recommend to read it in order to fully grab these concepts! ]


Here you can find the next posts of this series:
Prototypal Inheritance 2
Prototypal Inheritance 3


When it comes to Javascript is quite common to hear discussion about OOP (Object Oriented Programming) and classes.
Even the less expert Frontend Developer will tell you that class doesn't exist in Javascript, which doesn't mean you cannot write OOP with it especially being Javascript an Object-base language. Anyway even if it has done for many years, is not best practice write OOP code in Javascript and...wait, wait, wait! Slow down for a moment, I can't find a central idea here!
To me, it all looks like a bunch of informations read and heard here and there without a good understanding of it.
If in Javascript everything is an object

  • why is tricky to write OOP in Javascript?
  • Why should be simpler to write it in class-based languages?
  • And in particular, how exactly Object-oriented code looks like in Javascript?

With all these questions in mind, a typical curious developer will go out there in the broad broad web world and beging his/her search.
Aaaand after 10 years we will find him/her huddled in a corner of Google, singing the lullaby his/her mother used to sing to him/her!!
The resource on the internet are just too many and too short, I didn't succeed to find an online resource which would give me the whole picture from the beginning to the end without leave me full of dubts.
The problem with dubts is that they make you go to check another resource which probably use different terminology and prospective and bring you more dubts... Arghhh!!

But, at one point, i saw a light!
I decided to keep on researching offline and it was the best idea i could have!

Let's clarify some important terms:

OOP

From MDN:
"Object-oriented programming (OOP) is a programming paradigm that uses abstraction to create models based on the real world."
This means that object-oriented programming is just a "way" or a style to write your code.
Some languages are good for OOP, other less.
Also is interesting to know, even if less important for our purpose, OOP could be done with or without inheritance.

Class

If you, like me, have learened just Javascript as programming language, many of the things that other developers talk about will result more difficult to grab. Javascript is a special kid and more you study programming, more you understand why.
One of these things is for sure Class.
Class is something that exist just in class-based languages. In these lanuguages, Class aren't Object, they are something completely different from Object, they aren't a data structure and therefore can't be used to do something with it.
Classes are just like a configuration, classes are blueprint.
What it mean "Class is a blueprint"?
Think about a bike, your new awesome bike!
Class is like the instruction to build the bike. We can't do anything with these instruction, we cannot ride them or color them.
But, we can build a bike with it!
Actually we can build 10 bike or as many bike as we want.
And then we can ride those bike, yuuhuuu!

Basically Class is where we define the characteristic of an object.
Class cannot do nothing alone, it needs to be initiate or inherited.

Javascript doesn't have classes

That's why it is said that Javascript has no Class.
You can of'course emulate a Class behavior in Javascript but at the end it will still be an Object which means i can actually use my Object.
Back to the bike example, emulate a Class in Javascript is like buy a bike just to use it as a model to build other bike.
Of'course i can do that, i can just hang my bike to the wall and never ride it, just watch it to build other bike.
In whatever way i decided to use my bike it will always be a bike and if one day someone will decided to take it down and ride it, it will work.
We will go deeper into this concept in the second part of this series of posts, for now a theoretical explanation is enough.

Classical Inheritance

To answer to the other questions we state at the beginning of the post we need first to understand how Class inheritance work.
Keeping with the idea that we know just Javascript and we have no idea how class-based languages works, let's explain some important point of Classes.

Class-object relationship:
In class-based languages we have the blueprint "element" which is the Class and then the "elements" that instances or inherit from it which are called Objects.
Is important to understand that the relationship between Class and Objects are indirect, you can read everything you want about bikes but if you want to learn riding, you have to go out and ride one.
Is actually more useful to take in cosideration how a class is directly connected to an object instance instead of the other way around

class-object-relationship

Here is the question:
How 'Class init' work? How can you create an instance of a Class?
p.s. For some of you is easier maybe to think to an Object as extension of the Class instead of instance, like ES6 is making us use to.

With COPY operation!

An object * literally * copy the Class.
When you create a Class you can use it to init an instance object or to create another Class (inherit), when the latter happen they are usually called Parent and Child class.
The child class contain initial copy of parent class behavior and later is free to override this behavior or define a new one.
I want now to define a couple of terms often used because part of class-based languages but not always understood from just-javascript programmer (we should call our self jjp!! How cool is that!?! ok.. i stop here...)

Constructor
Constructor is a special method of the class which construct (indeed!) the class.
Usually it has the same name of the class.
What is his purpose?
Initiate any information (state) the istance will need.

// Class
Class CoolGuy {  
  specialTrick = nothing

  // Constructor. Same name as class
  CoolGuy(trick) { 
    specialTrick = trick 
  }

  showOff() {
    output("Here is my trick:", specialTrick)
  }
}

// instance of CoolGuy class
Gio = new CoolGuy('turn into super sayan')  
Gio.showOff(); // Here is my trick: "turn into super sayan"  

As you can see CoolGuy is a method. But it has inside informations (like utility) that can be used from the instance Gio to do something (like showing off to her friends!).

Super
Super is a keyword used in many languages when a child method call or reference to its parent method. Basically is a way to relatively reference the class we are inherited from. It's said super because of the idea that superclass is the parent of the current class.

class Vehicle {  
  engine = 1
  drive() {
    ignition(){ // some code here}
    output('moving!');   
  }

  ignition() {
    output('turn engine on!');
  }
} 

class Car inherits Vehicle {  
  engine = 2
  pilot(){
    // Child method refer to parent one!
    super:drive(); 
    output("let's go with my", engines, "engines!")
  }
}


Conclusion

We revealed the definition of some of the most used terms in OOP and we try to clarify some concepts coming from class-based programming languages.

Mostly what we have to keep in mind is:
Class inheritance is all about copy.
Child class is not linked to it's parent, child class get a copy of what it needs from its parent.
And that's also why in Javascript there are no Class.
Because Js Object don't make copy when init or inherit them.
Theoretically we should instantiate Object in Javascript but Object cannot be instantiate.
They just don't get copied.
Object instead are linked together but we'll explain this in the next post.