ECMAScript 6 Classes
ECMAScript 6 introduces “class” keyword in JavaScript. It will work in almost all browsers except IE. Everything one can do using class to create JavaScript classes can also be done with JavaScript constructor functions (the classic way). It just looks cleaner and less typing.
Here is how to create a JavaScript class using the class keyword:
'use strict';
(function() {
class Person {
constructor (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
isAdult() {
return this.age >= 18;
}
};
})();
Here is the classic way using a constructor function:
'use strict';
(function() {
function Person (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
this.isAdult = function() {
return this.age >= 18;
}
Object.defineProperty(this, 'fullName', {
get: function() {
return this.firstName + ' ' + this.lastName
},
set: function(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
},
enumerable: true
});
}
})();
One thing to note: If we were to display any Person using the class example, we would not be seeing the fullName property. That is because it is not enumerable using the “class” keyword. To iterate over the properties (or keys) in the class, we would have to use the Object.defineProperty() method to make fullName enumerable.
The other interesting thing about JavaScript classes is the fullName property (defined using getter and setters) reside on the prototype. Therefore, if we were to modify the fullName property to be enumerable, we would pass the prototype object in Object.defineProperty() method:
'use strict';
(function() {
class Person {
constructor (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
isAdult() {
return this.age >= 18;
}
};
Object.defineProperty(Person.prototype, 'fullName', {enumerable: true});
})();
The firstName, lastName, and age properties are instance properties.
Inheritance in JavaScript Classes
Use the “extends” and “super” keywords when inheriting other classes.
'use strict';
(function() {
class Person {
constructor (firstName, lastName, age) {
this.firstName = firstName;
this.lastName = lastName;
this.age = age;
}
get fullName() {
return this.firstName + ' ' + this.lastName;
}
set fullName(fullName) {
var nameArray = fullName.split(' ');
this.firstName = nameArray[0];
this.lastName = nameArray[1];
}
isAdult() {
return this.age >= 18;
}
};
Object.defineProperty(Person.prototype, 'fullName', {enumerable: true});
class Student extends Person {
constructor (firstName, lastName, age) {
super(firstName, lastName, age); //Calls the Person constructor!
this._enrolledCourses = [];
}
enroll(courseId) {
this._enrolledCourses.push(courseId);
}
getCourses() {
return this.fullName + ' is enrolled in courses: ' +
this._enrolledCourses.join(', ');
}
}
let john = new Student('John', 'Doe', 44);
john.enroll('CS101');
john.enroll('EN101');
display(john);
display(john.getCourses());
})();
In the above example, the Student class inherits from Person.
Student {
firstName: John
lastName: Doe
age: 44
_enrolledCourses: CS101,EN101
fullName: John Doe
}
John Doe is enrolled in courses: CS101, EN101
The Student instance “john” has inherited all the Person properties (firstName, lastName, age, fullName).
Make a one-time donation
Make a monthly donation
Make a yearly donation
Choose an amount
Or enter a custom amount
Your contribution is appreciated.
Your contribution is appreciated.
Your contribution is appreciated.
DonateDonate monthlyDonate yearly
JavaScriptShadow 
Leave a comment