DEV Community

Zeppa
Zeppa

Posted on • Updated on

JavaScript's ES6 Pseudoclassical Instantiation

The latest of the JavaScript instantiation patterns is ES6 Pseudoclassical. This instantiation pattern allows the creation of objects with the use of classes, similar to other programming languages.

Even though the ES6 Pseudoclassical class seems to be what others consider to be a "real" or "traditional" class, it continues to be prototypal. One of the outcomes is that it makes JavaScript more inviting to those programmers that are not familiar with prototypical inheritance.

For whatever the reason or intention may have been, one thing is for sure . . . it makes implementing object classes much easier. In order to make this possible, new keywords were introduced like the class keyword.

The following is an empty class:

class Person {

}

Constructor

The class allows the creation of the object by defining a constructor. The constructor is contained within the class declaration. It is very similar to the creation of an object with object literals. However, instead of separating the key/value pairs with a comma, the constructor uses semicolons. The constructor keyword helps facilitate its implementation.

constructor (first, last, dob) {
  this.firstName = name;
  this.lastName = last;
  this.birthDate = new Date(dob);
}

Methods

The class still allows for the creation of methods that the object class will be able to use. Even though the keyword prototype does not prefix the method name, the class method is defining a prototype method.

calculateAge = function() {
  return this.birthDate.getFullYear() - newDate().getFullYear();
}

Static Methods

Static methods are created with the keyword static. To use static methods, no instantiation of an object is required. The methods are accessed directly. It is similar to when Array.isArray is invoked. Array is not an instantiated object; it is an object type. Think of static methods as utility functions since they cannot be called by a class instantiation.

In static methods, the keyword this references to the class. This makes it possible for one static method to call another static method from the same class.

The concept of static methods may also have been introduced for those programmers that are used to them from other programming languages.

static greeting(person) = function() {
  return 'Hello ' + person.name + '!';
}

The resulting class, then looks like this:

class Person {

  constructor (first, last, dob) {
    this.firstName = name;
    this.lastName = last;
    this.birthDate = new Date(dob);
  }

  calculateAge = function() {
    return this.birthDate.getFullYear() - newDate().getFullYear();
  }

  static greet(person) = function() {
    return 'Hello ' + person.firstName + '!';
  }

}

Subclasses

Subclasses are created with the keyword extends. The format is similar to that of defining a class with the exception of the subclass name being followed by extends and the name of the parent or super class. In order to reference the parent class, JavaScript has also provided the super keyword.

The static methods from a parent class are also available to the subclass.

class Student extends Person {

  constructor (first, last, dob) {
    super(first, last, dob);
    classes = [];
  }

  addClass = function(class) {
    this.classes.push(class);
  }

}

Instantiation

In order to create an object from the class, the class constructor will be called with the new keyword.

let peep = new Person('John', 'Do', '12/31/1999');

let student = new Student('Jane', 'Do', '01/01/2005');

// Call static method
Person.greet(peep);  // 'Hello John!'

In the example, above there is also an example of calling a static method. The call is prefixed by the class itself and not the class instantiation. Calling peep.greet() or peep.greet(peep) is not possible. The correct invocation would be Person.greet(peep).

Conclusion

Even though the prior JavaScript instantiation patterns, provide much of the functionality of ES6 Pseudoclassical. The small differences and/or improvements in ES6 make it easier to learn JavaScript for all JavaScript newbies not just beginner programmers.

Top comments (0)