DEV Community

Cover image for Javascript and Classical Inheritance
John Peters
John Peters

Posted on • Updated on

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.

Top comments (2)

Collapse
 
jdforsythe profile image
Jeremy Forsythe

Vertical (or classical) inheritance leads to tight coupling. So does dependency injection, which is also used by Angular. That's why you should favor composition over inheritance.

Classes work well in Angular, where every component is a component, but just because it works well in Angular doesn't make it "good" or mean that you should use it unless it's the right tool for the job - and it's probably not most of the time.

Collapse
 
jwp profile image
John Peters • Edited

Fair assessment; however, not all dependency injection or tight coupling is bad.

For example, a Car contains an Engine that is (hopefully) tightly coupled to the bolts that keeps the car able to use the engine.

We rely on the dependency that the gas we buy for our cars was properly mixed, measured and injected into our gas tanks.

Loose coupling is good when we need to "just ensure it works". For example, a bolt breaks off in the engine manifold. We simply drill it out, re-tap the threads and put in a new bolt (maybe a higher grade bolt).

It comes down to using the right tool for the job desired to accomplish.