single-head-img

ES6 Class

June 16, 2017

What’s ES6 Class?

JavaScript (JS) doesn’t contain classes in the form like other Object-Oriented Programming (OOP) languages do. But, EMCAScript 6 (ES 6) Class formalize the common JS pattern of simulating class-like inheritance hierarchies using functions and prototypes. ES6 Class can’t be invoked as other functions, so ES6 Class uses reserved word new. Body of the class is executing in “strict mode”. Constructor is special method which create and initialize object with help of key word class.

Class Syntax

There are two ways to define class in JavaScript. Both ways give pretty much same results, but “Class declaration” is the most used. So, if we’re using Class declarations, class will looks like:

class ClassName{
   constructor (property1, property2){
     this.property1 = property1;
     this.property2 = property2;
   }
   showProperties(){
     console.log("Property 1: " + this.property1 +", Property 2: " + this.property2)
   };
}
var classObject = new ClassName("property1-VALUE", "property2-VALUE");

 

If we’re using second way to declare class, Class expressions, class will looks like:

var ClassName = class{
   constructor (property1, property2){
     this.property1 = property1;
     this.property2 = property2;
   }
   showProperties(){
     console.log("Property 1: " + this.property1 +", Property 2: " + this.property2)
   };
}
var classObject = new ClassName("property1-VALUE", "property2-VALUE");

 

The only difference there is on the first line of class definition. When you create an object, he has all functions from class which made him. So, if we want to use showProperties function for our classObject, we will set it like this:

classObject.showProperties();

 

After that, if you look into your browser’s console, you will got something like “Property 1: property1-VALUE, Property 2: property2-VALUE“.

Prototype and Static methods

There are three types of methods (functions) to use at class level: constructor, static methods and prototype methods. In the examples before, we used prototype method showProperties();. Let’s make one example with all three types of methods and try to call it.

var ClassName = class{
   constructor (property1, property2){
     this.property1 = property1;
     this.property2 = property2;
   }
   static staticMethod(){
     console.log('Static Method Called');
   } 
   showProperties(){
     console.log("Property 1: " + this.property1 +", Property 2: " + this.property2)
   };
}
var classObject = new ClassName("property1-VALUE", "property2-VALUE");

classObject.showProperties(); // returns: Property 1: property1-VALUE, Property 2: property2-VALUE

ClassName.staticMethod(); // returns: Static Method Called

 

There are three types of methods, each one has different color(blue – constructor, orange – static method and magenta – prototype method). First type, constructor, defines the function that represents the class. Second type, static method, is method of class itself. Third type, prototype method, is usually inherited by instances (object) of class.

Extending class

If you want to use a function of one class to another, there’s a good thing called extending. To extend the class with another one, we use key word extend. In the example below, I’ve created two classes with one static method in the first class. I wanted to use that static method with second class, so I’ve just extend it, like:

class FirstClass{
    static classMethod() {
        return 'hello';
    }
}

class SecondClass extends FirstClass {
}
SecondClass.classMethod(); // returns: hello

 

We see that extending class (second one) can use methods of first class. It doesn’t matter if these methods are static or prototype, principle is same.

Conclusion

This is the basic things you need to know about ES6 classes. I described most common used examples by myself, but there are many, many more possibilities to work with classes. In the future posts, I will also describe some more complicated work with ES6 classes, too.

LEAVE A COMMENT