Javascript and Classical Inheritance

jwp

John Peters

Posted on October 28, 2019

Javascript and Classical Inheritance

From OOP concepts, now over 25 years old; it was taught that inheritance was a positive concept. (In C#; Java or C++). The main idea was to only code something one time, one place, for one concern. Emphasis on the 'is-a' relationship was taught first. So for example, a car, truck, sedan and sport coupe are Vehicles.

The commonality between them abstracted to the lower base class of Vehicle. Each specific Car built itself on-top of a common base class (thus the vertical relationship) other classes could build on top of other classes ad-infinitum.

Problems were seen early; where, the number one problem was a result of violating the 'is-a' relationship. If it wasn't truly a part of the base class then it didn't belong in the vertical inheritance chain. This caused a lot of pain in the early days; and OOPers were quick to put heavy emphasis on "is-a" relationships. For example; cars are in no way a tire and a tire is not a car, but all cars have tires. This is horizontal inheritance or containment because cars "have-a" set of tires, cars "have-engines", they "have-radios" etc. All "has-a" relationships should be contained by the class at hand, not inherited.

Enter Javascript Experts

Javascript always favored things like containment of objects, passing functions around and other horizontal-inheritance/compositional styles. It's not surprising really that vertical-inheritance was not at the forefront. Alas some did try to implement deep inheritance chains, many stumbling on the same thing OOPers did earlier. They didn't follow the strict 'is-a' relationship. Plus implementation of the prototype method of inheritance was a bit obscured. Why do it that way when "we don't need it?"... Good arguments but...

Vertical Inheritance is Good
If we examine React and Angular both employ vertical-inheritance as a way to bring about conformity to a DSL (Domain specific Language) of their own making. Using the react component below allows you to tie-in to the react-way of doing things.

React Inheritance
react inheritance

Angular Inheritance
angular inheritance

So as you can see without making this article too long, Vertical-Inheritance otherwise referred to as Inheritance is good and the best JavaScript frameworks in the world use it. One caveat and probably a good idea is "just keep the depth low if possible" We won't go into reasons why in this post other than to say "favor composition over inheritance" 75%+ of what can be done is better suited to compositional patterns anyway.

💖 💪 🙅 🚩
jwp
John Peters

Posted on October 28, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Benchmarking your JavaScript Code
javascript Benchmarking your JavaScript Code

April 22, 2020

Javascript and Classical Inheritance
javascript Javascript and Classical Inheritance

October 28, 2019

Dev.To is great place...
javascript Dev.To is great place...

October 23, 2019