DEV Community

Discussion on: A deep dive into ES6 Classes

View post
Collapse
 
peerreynders profile image
peerreynders •

Inheritance

this post answers the how

In most cases the why decides whether how is even relevant.

The most compelling motivation for class inheritance in JavaScript is to build on platform specific capabilities like using custom elements that require class-based inheritance — to the point that prototypal inheritance, combination inheritance, parasitic inheritance or parasitic combination inheritance aren't enough and one has resort to using Reflect.construct() to create a class instance in ES5.1 (June 2011).

That said:

Favor object composition over class inheritance

Gamma, Erich et al. "Design Patterns Elements of Reusable Object-Oriented Software"". Putting Reuse Mechanisms to Work, p.20, 1994.

There are also other ways of exploiting and managing commonality/variability — for example TypeScript supports discriminated unions.

Example

type TutorialInfo = {
  topic: string;
};

type VideoTutorial = TutorialInfo & {
  kind: 'video';
  duration: number;
};

type PdfTutorial = TutorialInfo & {
  kind: 'pdf';
  pages: number;
};

type Tutorial = VideoTutorial | PdfTutorial;

function take(tutorial: Tutorial): void {
  switch (tutorial.kind) {
    case 'video':
      console.log(`Watch Video: ${tutorial.topic}`);
      break;

    case 'pdf':
      console.log(`Read PDF: ${tutorial.topic}`);
      break;

    default:
      const _exhaustiveCheck: never = tutorial;
  }
}

const v: VideoTutorial = {
  kind: 'video',
  topic: 'In The Loop',
  duration: 3081,
};

const p: PdfTutorial = {
  kind: 'pdf',
  topic: 'Modern Asynchronous JavaScript',
  pages: 75,
};

take(v); // "Watch Video : In The Loop"
take(p); // "Read PDF: Modern Asynchronous JavaScript"
Enter fullscreen mode Exit fullscreen mode

In terms of vanilla JavaScript this simply boils down to:

function take(tutorial) {
  switch (tutorial.kind) {
    case 'video':
      console.log(`Watch Video: ${tutorial.topic}`);
      break;

    case 'pdf':
      console.log(`Read PDF: ${tutorial.topic}`);
      break;

    default:
      const _exhaustiveCheck = tutorial;
  }
}

const v = {
  kind: 'video',
  topic: 'In The Loop',
  duration: 3081,
};

const p = {
  kind: 'pdf',
  topic: 'Modern Asynchronous JavaScript',
  pages: 75,
};

take(v); // "Watch Video : In The Loop"
take(p); // "Read PDF: Modern Asynchronous JavaScript"
Enter fullscreen mode Exit fullscreen mode

Of course by this point the "guard rails" (exhaustiveness checking) are off.

Refactoring:

Have a nice day!

Collapse
 
mustapha profile image
Mustapha Aouas • • Edited

Hi Peerreynders,

Thanks for your feedback and for sharing these resources. I'll definitely add the "Design Patterns Elements of Reusable Object-Oriented Software" book to my reading list !

Have a great day.

Collapse
 
peerreynders profile image
peerreynders •

I'll definitely add the "Design Patterns Elements of Reusable Object-Oriented Software" book to my reading list!

Look, don't get me wrong, it's a good book but from a contemporary view point you have to deal with ancient C++ code and pre-UML diagrams.

If you want the read the treatment on inheritance, the free preview on Google Play should be enough.

In terms of Design Patterns 10 years later Head First Design Patterns was published and lots of people found it to be more accessible as it explained everything in terms of object-oriented design principles (of which "Favour composition over inheritance" is one). Not sure what's in vogue these days.

The problem with Design Patterns are The 4 Stages of Learning Design Patterns: Ignorance, Awakening, Overzealous Application, Mastery

When it comes to SOLID — even that's just a milestone on the journey: The SOLID Design Principles Deconstructed.

In the end objects are not the only form of data abstraction (On Understanding Data Abstraction, Revisited).

MDN: JavaScript

JavaScript is a prototype-based, multi-paradigm, single-threaded, dynamic language, supporting object-oriented, imperative, and declarative (e.g. functional programming) styles.

and

MDN: Classes

Classes are a template for creating objects.

Most mainstream OO is class-based object-oriented programming; in JavaScript objects can be created in the absence of a class — opening up avenues to alternate solution approaches — not too surprising given that Brendan Eich was recruited to Netscape with the promise of "doing Scheme" in the browser.

So with JavaScript, classes are only part of the story (Eloquent JavaScript doesn't introduce them until Chapter 6).

Some comments have been hidden by the post's author - find out more