Day: August 6, 2017

Pseudoclassical Instantiation in ES2015

Last month I posted about the various instantiation styles in ES5.  This month let’s take a look at how to instantiate in ES2015 aka ES6!

First let’s review how we instantiate in ES5.

ES5 Superclass

We are making a class called Furniture. It takes in arguments h, w, and d, which become equal to this.height, this.width, and this.depth, respectively.  Furniture also has the property this.material, which is preset to ‘wood’. Lastly, we gave Furniture a method called calcSqFootage. When called, it returns the product of this.height, this.width, and this.depth.

var Furniture = function(h, w, d) {
  this.height = h;
  this.width = w;
  this.depth = d;
  this.material = 'wood';
};

Furniture.prototype.calcSqFootage = function(){
  return this.height * this.width * this.depth;
};

ES5 Subclass

Next we make a subclass of Furniture. It is called Table, and its parameters are h, w, and d. If the superclass requires these parameters, the subclasses require them too.

Next we must connect Table to Furniture. We do this by using the .call() method.  We want to call the class Furniture and give it the context of this subclass as well as pass the parameters.

Now the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

In the last two lines below, we need to connect the subclass’ prototype property to the superclass’ prototype, so that the methods can be inherited. So we create a new object with Object.create() and re-assign Table.prototype. Object.create() creates a new object with an inheritance chain.

Lastly since we re-assigned the value of Table.prototype, we lost the constructor property of Table.prototype. We need to add it back, so that we will be able to use it in the case we want to figure out which function created a certain instance object.

var Table = function(h, w, d) {
  Furniture.call(this, h, w, d);
  this.finish = 'Espresso';
  this.distressing = false;
};
Table.prototype = Object.create(Furniture.prototype);
Table.prototype.constructor = Table;

We instantiate in ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

Now let’s turn the above into ES6!

 

ES2015/ES6 Superclass

Even though the below code looks different, it functions the same as the code above.

We pass in the arguments h, w, and d to the constructor. (Note the constructor here is different than the constructor property! The constructor here is a method for creating and initializing an object created within a class). The parameters give values to this.height, this.width, and this.depth respectively. We still have the property this.material equal to ‘wood’.

Lastly we have the calcSqFootage method inside the class block.

class Furniture {
  constructor (h, w, d) {
    this.height = h
    this.width = w
    this.depth = d
    this.material = 'wood'
  }
  calcSqFootage() {
    return this.height * this.width * this.depth;
  }
};

 

ES2015/ES6 Subclass

With a subclass, we must do two things to show it is a subclass. The first thing is to declare that it is a subclass by using the extends keyword. We say that the subclass extends the superclass.

The constructor will take in the same arguments (h, w, and d). The next new part is that we call super(). This is about equivalent to the Furniture.call(this, h, w, d) in ES5.

Like in ES5, the Table subclass inherits the height, width and depth properties and the calcSqFootage method from the Furniture superclass. It has new properties for finish and distressing.

With the ES6 syntax, we do not need to use Object.create() or set the constructor for Table.prototype and Table.prototype.constructor. The syntax does it all for us.

class Table extends Furniture {
  constructor (h, w, d) {
    super(h, w, d);  
    this.finish = 'Espresso'
    this.distressing = false
  }
};

We instantiate in ES6 similar to ES5:

var myMediaCenter = new Furniture(84, 72, 16);
var myDiningTable = new Table(32, 60, 36);

 

In this post, we have reviewed the ES5 pseudoclassical instantiation style of a class and its subclass. Then we contrasted it with the ES2015/ES6 syntax. The ES6 syntax is different, but its underlying functionality is the same as ES5.