Prior to ES6, classes have been in use in Javascript. ES6 just comes with a clean, nice-looking syntax for defining classes. It’s good to note that JavaScript’s class is just a more convenient way of creating constructor functions, which are very different from traditional classes. In this article, we will focus on:
- How to define a class
- How to define an instance of a class
- Methods in classes
- Creating a subclass of a class.
Defining a Class in ES6
As said above, the ES6 class is just a more convenient way of doing something that has already been in existence. For instance, let’s say we want to define a class Person and a method sayName for the class. How will this be done in ES5?
//ES5
function Person (name, height) {
this.name = name;
this.height = height;
}
Person.prototype.sayName = function() {
this.console.log(this.name);
}or
//ES5
function Person (name, height) {
this.name = name;
this.height = height;
this.sayName = function() {
console.log(this.name);
}
}Notice first, we had to use a function to define this class. In the first example above, the methods were defined by adding the method to prototype. The second example is another way where methods are added internally.
ES6 came with a new and beautiful way of defining classes using the class keyword. This method comes with other cool features as we will discuss in this article. First, though, let’s see how our Person class will be written in ES6.
//ES6
class Person {
constructor() {
this.name = "Person";
this.height = 150;
}
sayName() {
console.log(this.name);
}
}More elegant right? Sure but wait a minute, what’s going on here? What’s the constructor doing there? First, the body of a class refers to the part between the {}. This is where you define methods and properties. The constructor method is a special method that is used to define and initialize an object created with a class. In the above example, we just initialized the value of this.name and this.height. So, even if an instance of the class is created without setting these values, a default value will be available for use. If a constructor method is not added to a class, it’s okay. An empty constructor method will just be added.
Note: There can only be one method with the name “constructor” in a class. A SyntaxError will be thrown if the class contains more than one occurrence of a constructor method. The above example was written as a class declaration. It’s important to note that, unlike their function counterparts, class declarations are not hoisted. Hence, you cannot use a class before it is defined.
A class can also be written as an expression. So the Person an example can be written as:
//unnamed
var Person = class {
constructor() {
this.name = "Person";
this.height = 150;
}
sayName() {
console.log(this.name);
}
}or
//named
var Person = class Person{
constructor() {
this.name = "Person";
this.height = 150;
}
sayName() {
console.log(Person.name);
}
}A named class acts the same way as a named function expression. Any variable created with a name class will have name property. This name doesn’t change even if it is assigned to a variable. The name of the class always refers to the name used to create it. You can read this for further reference. Class expressions are also not hoisted.
Creating an Instance of a Class
How can an instance of a class be created and used? It is the same old way. Let’s create an instance of the above class just created.
var TeachDeveloper= new Person();
TeachDeveloper.sayName();//"Person"
TeachDeveloper.name = "TeachDeveloper";
TeachDeveloper.sayName(); //"TeachDeveloper"
An instance of a class is created using the new keyword. Since a class is basically an object, we call its methods the same way we will do to the methods of an object. Can you see the constructor method in action? If the name of an instance of Person is not set, the name of the instance created is set to Person.
When you create an instance of a class in JavaScript, a new object is created but it’s still dependent on its parent class. Rather, an object that is linked to a prototype is created. Therefore, any change made to that prototype affects the new object, even after creating the instance.
Methods in Classes
There are two types of methods that can be created using class: The prototype methods and static methods.
Prototype Methods
The method sayName used in our example above is a prototype method. An instance of a class can call prototype methods. Prototype methods also include getters and setters.
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
get fullName() {
return this.computeFullName;
}
computeFullName() {
return this.firstName +" "+ this.lastName;
}
}
var TeachDeveloper = new Person("Teach", "Developer");
console.log(TeachDeveloper.fullName());//Teach Developer
Static Methods
Static methods cannot be called by instances of a class. They are only available to a class that is called without creating an instance. If you call a static the method from an instance, you will get an error
class Person {
constructor() {
this.name = "Person";
this.height = 150;
}
static sayName(name) {
console.log(name);
}
}
Person.sayName("TeachDeveloper");//"TeachDeveloper"
var Developer = new Person();
Developer.sayName("Developer");//error : Developer.sayName is not a functionSubClassing Classes
A subclass class can be created using the extends keyword. When you create a subclass of a the class becomes a base class. Let’s create a subclass of Person.
//Base class
class Person {
constructor() {
this.name = "Person";
this.height = 150;
}
sayName() {
console.log(this.name);
}
}
//subclass
class Developer extends Person {
constructor(name, height) {
super(name, height);
this.name = "Developer"
}
}
var Jessy = new Developer ();
Jessy.sayName();//"Developer"Developer is a subclass of Person. Notice that in the constructor of the subclass, there is a call to super(). It is for making super-constructor calls and allows access to parent methods i.e. a constructor uses the super keyword to call the constructor of a parent class. This is really important because, in derived classes, super() must be called before you can use this. Leaving this out will cause a reference error.
//Base class
class Person {
constructor() {
this.name = "Person";
this.height = 150;
}
sayName() {
console.log(this.name);
}
}
class Developer extends Person {
constructor(name, height) {
this.name = "Developer"
}
}
var Jessy = new Developer ();
Jessy.sayName();//Must call super constructor in derived class before accessing 'this' or returning from derived constructorOne last thing. In a subclass, we can create our own methods. We can even create a method with the same name as the base class method. The method of the subclass will override that of the base class. Let’s add more methods to our subclass Developer then.
//Base class
class Person {
constructor(name, height) {
this.name = "Person";
this.height = 150;
}
sayName() {
console.log(this.name);
}
}
class Developer extends Person {
constructor(name, height) {
super(name, height);
}
sayName(name) {
console.log("I am an awesome Developer and my name is " +name)
}
sayHeight () {
console.log("This is my height: " +this.height+ "cm");
}
sayTools(tool1, tool2) {
console.log("I love " +tool1 + " and " +tool2 );
}
}
var TeachDeveloper = new Developer ();
TeachDeveloper.sayName("TeachDeveloper");
TeachDeveloper.sayHeight();
TeachDeveloper.sayTools("JavaScript", "CSS");And it’s a wrap.
Got any questions or addition? Please leave a comment.
Thank you for reading 🙂