INTRO
Before the advent of classes in JavaScript, it was a hard feat to mimic classes as other languages such as c++ and java had then. We could only mimic on a prototypical basis by using the Constructor/prototype pattern. This article in itself is a brief to let you understand the concept of JavaScript classes. While being concise I try as much as possible to make it a clear and understandable read.
JavaScript class is a blueprint and prototypical form for creating objects. You can as well call it a template upon which objects are created. It encapsulates data and functions upon which data is manipulated or used. This is one of the few upgrades ES6 or ECMAScript 2015 brought with it to provide a better way to go with the OOP paradigm.
DEFINING CLASSES
Just like function declaration and function expression classes are defined in two ways namely
Class Declaration
Class Expression
1. Class Declaration
In this, you start by using the keyword <class> to create a class. Afterward, the constructor method should be created inside the class with the exact name “constructor”. The constructor method is used to initialize object properties.
class Phone {
constructor(name, year) {
this.name = name;
this.year = year;
}
}
The code sample above is declared with the class name being “phone”. Going to the second line the constructor function is created having object properties in it “name” and “year”. As I said before they’re used to create and initialize object properties and objects as shown below.
let Android = new Car("Redmi", 2023);
2. Class Expression
In this there are two ways about it, in one an anonymous class is created and assigned to a variable while in the second the class is created with a name and is assigned to a variable.
// Expression; the class is anonymous but assigned to a variable
const Rectangle = class {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
// Expression; the class has its own name
const Rectangle = class Rectangle2 {
constructor(height, width) {
this.height = height;
this.width = width;
}
};
Application
class Phone {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
let Android = new Phone("Redmi", 2010);
document.getElementById("demo").innerHTML =
"My phone is " + Android.age() + " years old.";
In the above lines of code, the class is declared to have a class method “age” in it which is used to return the age of the phone rendered in the HTML.
INHERITANCE
In javascript, a class can become a child of another class thereby inheriting and mirroring all of its properties. Inheritance in javascript is done using the keyword “extends”, just like saying “class tablet extends phone{ }”.
class Phone {
constructor(name, year) {
this.name = name;
this.year = year;
}
age() {
let date = new Date();
return date.getFullYear() - this.year;
}
}
class Tablet extends Phone {
constructor(name, year) {
super(name, year);
}
}
let Android = new Tablet("Redmi", 2010);
console.log(Android)
Output
Android {name: “Redmi”, year: 2010}
In the above lines of code the class "Tablet" is created to be a subclass of the parent class "Phone". In the child class the keyword "super" is used in the constructor method to mirror all the properties of the parent class. In the next part of this lesson, I'll discuss javascript methods "getters and setters".