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)