Classes in ES6

Tram Ho

ES6 (ECMAScript2015) is a major upgrade to JavaScript. In this article, we will learn about class es6 in JavaScript.

If you are a javascript developer then you must know that javascript follows the prototypal scheme, but sometimes it is a bit confusing depending on the devjs. However, with the introduction of class es6, the syntax will be much simpler and more intuitive.

In javascript we can declare an object by declaring a variable of type data object.

For example:

But that declaration is too old and has no syntax standards, which makes it very difficult for new programmers to access javascript. Therefore in ES6 version has improved a lot of classes with OOP standard syntax.

Class Definition

In ES6, we support declaring an object according to OOP standard, using the keyword class .

For example, for the above VD we can convert to ES6 format as follows:

As you can see, its syntax is much clearer, isn’t it?

With ES6, you cannot declare properties as normal, you can only assign it to methods in the object.

To initialize the object declared according to ES6 standard, you use the new keyword with the following syntax:

Where className is the name of the object you want to initialize.

For example: I will initialize the Employee object declared in the above example.

And with ES6, it also supports us a special method that any programming language has for the class that is the constructor – the constructor method. constructor in ES6 has the same effect, it will automatically be called when the object is initialized.

To declare constructor in ES6, you just need to declare a method named constuctor .

Example: I will declare constuctor for the Employee object above.

As I said above, with the class declaration type in ES6, we cannot directly declare properties for it but must initialize via methods and usually we will put it in the constructor always.

Now when initializing the object we can pass parameters to it as well as other languages.

For example:

new Employee("Hoàng Minh Khánh", 22);

If you want to verify it can console.log() this object to see if the class will appear two properties male and age with the value as initialization.

Class Inheritance

Already under the OOP-style standard, it must be full, right? With ES6, it has also provided us to use the extends keyword to inherit from another object.


In which: A is the class being declared, and it inherits the properties and methods from class B

Example: I will write a MaleEmployee object inherited from the Employee class above.

In this example, I have used super() – written with this syntax, it is called the constructor of the parent class, and the details about it below will be clearer.

Base class access

In ES6, to make calls to the methods in the parent class while in the child class, and that method has been rewrite in the subclass, you use keyword super with the following syntax:


Where, methodName is the method of the parent class that you want to call.

For example:

And you can also call the parent class method while it’s in that subclass (in the rewrite method itself).

For example:

Static Members

In ES6 also support we declare static components for the object, using the static keyword in front of the method name.

For example:

And when a method is declared as static methods , we will not be able to call that method normally anymore, but we will call the following syntax:


className is the name of the class that contains the static methods you want to call.

staticMethodName is the name of the static method you want to call.

Example: I will call the defaultEmployee method of the Employee class above.

Setter and Getter

If you have learned through object-oriented then surely you will not be nothing new to the setter and getter . And in ES6 also supports us to set setter and getter for properties.

setter and getter are special methods (magic methods) they are called when we affect the properties of the object (I explain it through the speaker to those who do not know it, please give details to google or comment. I will have a more detailed concept).

To declare setter and getter in ES6 we use keyword set and get before the name of the method you want to set it as setter or getter.

For example, I will convert the setName, getName, setAge, getAge methods in the above employee object to setter getter.

Now we will use the setter getter as we do with a regular property.

For example:

Or you can also setter and getter by directly accessing the class without initializing.


ES6 has supported us very strongly in class, until now, it has supported most of the web browsers and only IE, Opera and android browser are not yet supported, so everyone needs to consider when using.

You can see the details here

Reference article

Share the news now

Source : Viblo