Javascript Inheritance Part 1: Overview and Use Case

Despite having programmed in Javascript for several years now, and I never knew until recently that the type of object-orientated programming that it follows is prototype-based and not class-based. And indeed I did not know even know object-orientated programming was not synonymous with classes. When researching the subject, I found most material didn't explain clearly, and thus this is aimed to remedy that. It is aimed at those with an understanding of closure in Javascript, a tutorial for which you can find here.

Because Javascript is very grassroots in its development, the terminology surrounding these concepts is a tad unclear. The goal of this series is to clarify. If you are already familiar with the concepts and just want a top-down overview, feel free to skip to part 4.



Part 1: Overview and Use Case
Part 2: Delegation
Part 3: Concatenation
Part 4: Putting it All Together

Overview of Inheritance

At its heart, object-orientated programming is a paradigm for problem solving whose approach to problem solving is to break everything into units (ie. objects) that have defined state (properties) and behaviour (methods). In other words, to compartmentalise large, complex problems into smaller modules—which you can reason about and test individually—that then work back together to solve the larger problem. Also at it's heart is code reuse, the idea that similar objects can reuse code and the less you have to code the less chance you have of making mistakes.

Inheritance is our tool that enables us to reuse code: it details how something more specific imports properties and behaviours from something more general. And already we've hit our first yellow flag, which I'll go into later.
Eg. How 'nouns' and 'verb' both can inherit from 'word' that can have the property word length and the method morph (into plurals conjugations for example). Thus we can make code for 'word' to reuse for both 'noun' and 'verb'.

There's two paradigms or models through which can approach categorisation:

Class-based Inheritance:

1. If the class is a cooking recipe, then the object is the dish.
2. Make a hierarchy of labels (classes) that define the what (the properties) and behaviours (methods). We go from abstract labels, to steadily more concrete sublabels till we've fully described an object.
3. Inheritance here is between child and parent classes, where child classes are the same parent but can add extra to the parent's base blueprint. In this same way, objects are children of classes.  This is a hierarchy of parents, children, children of those children, etc.

Prototypal Inheritance:

1. If methods are various skills that any job might need, prototypes are those methods combined into a job description.
2. Build behaviours up into groups (prototypes) that can be applied to objects. Objects are provided by the programmer (not from inheritance system), and those objects 'inherit' the methods from prototypes.
3. Inheritance here only has two levels, objects that inherit prototypes and the prototypes which are grouping of methods. 

Because prototypes are abstract and do not actually get instantiated, some people prefer to avoid saying 'objects inherit from prototypes', instead saying 'objects include prototypes', 'objects delegate to prototypes', 'objects concatenate prototypes', etc.

Under class inheritance, classes specific other classes down a chain of specification until the most precise class specifices the object. Under prototypal inheritance, objects are built up from nothing and are composed with methods from a prototype. Javascript does not support traditional classes. But since these are two paradigms achieve the exact same thing (abstracting the world into objects), Javascript can mimic classes. And of course classes could mimic prototypes.

Example of both and Use Case

In the following video, inheritance refers to class-based inheritance whereas composition refers to prototype-based inheritance.



This already highlights how the language regarding the subject is fairly murky.

Part 2: Delegation