Chapter 20. Subtyping in a Plain JavaScript Front-End App

Table of Contents

1. Subtyping with Constructor-Based Classes
2. Case Study 1: Eliminating a Class Hierarchy
2.1. Make the JavaScript data model
2.2. New issues
2.3. Encode the model classes of the JavaScript data model
2.4. Write the View and Controller Code
3. Case Study 2: Implementing a Class Hierarchy
3.1. Make the JavaScript data model
3.2. Make the entity table model
3.3. New issues
3.4. Encode the model classes of the JavaScript data model
4. Quiz Questions
4.1. Question 1: Constructor-Based Inheritance Pattern
4.2. Question 2: Check Method for Segment Property

Whenever an app has to manage the data of a larger number of object types, there may be various subtype (inheritance) relationships between some of the object types. Handling subtype relationships is an advanced issue in software application engineering. It is often not well supported by application development frameworks.

In this chapter of our tutorial, we first explain the general approach to constructor-based subtyping in JavaScript before presenting two case studies based on fragments of the information model of our running example, the Public Library app, shown above.

In the first case study, we consider the single-level class hierarchy with root Book shown in Figure 20.1 below (which is an incomplete disjoint segmentation). We use the Single Table Inheritance approach for re-factoring this class hierarchy to a single class that is mapped to a persistent database table stored with JavaScript's Local Storage.

Figure 20.1. The object type Book as the root of a disjoint segmentation

The object type Book as the root of a disjoint segmentation

In the second case study, we consider the multi-level class hierarchy consisting of the Person roles Employee, Manager and Author, shown in Figure 20.2 below. We use the Joined Tables Inheritance approach for mapping this class hierarchy to a set of database tables that are related with each other via foreign key dependencies.

Figure 20.2. The Person roles hierarchy

The Person roles hierarchy

In both cases we show

  1. how to derive a JavaScript data model, and a corresponding entity table model, from the class hierarchy (representing an information design model),

  2. how to encode the JavaScript data model in the form of JavaScript model classes,

  3. how to write the view and controller code based on the model code.

1. Subtyping with Constructor-Based Classes

Since JavaScript does not have an explicit class concept, subtyping is not directly supported, but certain forms of subtyping can be implemented with the help of certain code patterns. Any subtyping code pattern should provide two inheritance mechanisms: (1) inheritance of properties and (2) inheritance of methods.

As we have explained in , classes can be defined in two alternative ways: constructor-based and factory-based. Both approaches have their own way of implementing inheritance. In this part of our tutorial we only discuss subtyping and inheritance for constructor-based classes, while in the book Building Front-End Web Apps with Plain JavaScript we also discuss subtyping and inheritance for factory-based classes

We summarize the 3-part code pattern for defining a superclass and a subclass In a constructor-based class hierarchy with the help of an example, illustrated in Figure 20.3 below:

// (1) Define superclass
function Person( first, last) {
  this.firstName = first; 
  this.lastName = last; 
// (2) Define subclass
function Student( first, last, studNo) {
  // invoke superclass constructor this, first, last);
  // define and assign additional properties
  this.studNo = studNo;
// (3) Inherit methods from superclass
Student.prototype = Object.create( Person.prototype);
// adjust the subtype's constructor property
Student.prototype.constructor = Student;

Figure 20.3. Student is a subclass of Person

Student is a subclass of Person