JavaScript Prototypal Inheritance

The JavaScript's facility to provide inheritance is via prototype property of the constructor function (i.e. accessible via __proto__ in the instance context). Thus, we normally use the prototype to make properties and functions possible to be inherited. See the following code to do the inheritance properly.

Code 1 - Proper Way of Implementing Prototypal Inheritance

"use strict";

function Person(firstName, lastName) {
  this.firstName = firstName;
  this.lastName = lastName;
}

Person.prototype.middleName = "";

Object.defineProperty(Person.prototype, 'fullName', {
  get: function() {
    var name = (this.firstName||"");
    name += (name.length>0 ? " " : "") + (this.middleName||"");
    name += (name.length>0 ? " " : "") + (this.lastName||"");
      return name;
  }, 
  set: function(name) {
    var DELIM = " ";
    var names = (name||"").split(DELIM);
    this.firstName = names[0];
    this.lastName = names[1];
  }
});

function Employee(firstName, lastName, position) {
   Person.call(this, firstName, lastName);
   this.position = position||"";
}

Employee.prototype = Object.create(Person.prototype);
Employee.prototype.constructor = Employee;

var person = new Person();
person.fullName = "Ron Webb";
console.log(person.fullName);

var employee = new Employee("Ofelia", "Webb", "Manager");
console.log(employee.fullName);
console.log(employee.position);

Based on preceding code, the Employee is inheriting the Person via the following snippet:

Snippet 1 - Inhering the Person Class

Employee.prototype = Object.create(Person.prototype);

But, we should not stop there. We need to also specify the constructor to use the create the instance of Employee like the following snippet:

Snippet 2 - Specify the Constructor to Create the Employee Instance

Employee.prototype.constructor = Employee;

Lastly, in the constructor implementation of the Employee try to also call the constructor of the Person like the following snippet:

Snippet 3 - Call the Parent's Constructor

function Employee(firstName, lastName, position) {
   Person.call(this, firstName, lastName);
   this.position = position||"";
}

Using ES6 Syntactic Sugar for Inheritance

With ES6, this was greatly simplified because we don't need to deal with the prototype property of the constructor function like the following code:

Code 2 - ES6 implementation of Code 1

"use strict";

class Person {
  constructor(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.middleName = "";
  }
  
  get fullName() {
    var name = (this.firstName||"");
    name += (name.length>0 ? " " : "") + (this.middleName||"");
    name += (name.length>0 ? " " : "") + (this.lastName||"");
      return name;  
  }
  
  set fullName(name) {
    const DELIM = " ";
    var names = (name||"").split(DELIM);
    this.firstName = names[0];
    this.lastName = names[1];  	
  }
}

class Employee extends Person {
  constructor(firstName, lastName, position) {
   super(firstName, lastName);
    this.position = position||"";
  }
}

var person = new Person();
person.fullName = "Ron Webb";
console.log(person.fullName);

var employee = new Employee("Ofelia", "Webb", "Manager");
console.log(employee.fullName);
console.log(employee.position);

In ES6, we can now use the class keyword to define a class and a constructor method for its initialization. Regarding the constructor, we can now use the super method to call the parent constructor.

Moreover, implementing getter (i.e. using the get keyword before the function name) and setter (i.e. using the set keyword before the function name) are now very simple. Also the const keyword is now available to define immutable identifier just like what we can see on the fullName setter as we can see in the following snippet:

Snippet 4 - Using the Const Keyword

set fullName(name) {
  const DELIM = " ";
  var names = (name||"").split(DELIM);
  this.firstName = names[0];
  this.lastName = names[1];  	
}

All these enhancements in ES6 related to inheritance, in the background it still using the prototypical way. Remember these are just syntactic sugar.