Javascript and Classical Inheritance

John Peters - Oct 28 '19 - - Dev Community

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.

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Terabox Video Player