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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | var employee = { name: null, age: null, setName: function (name) { this.name = name; }, getName: function () { return this.name; }, setAge: function (age) { this.age = age; }, getAge: function () { return this.age; } }; |
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class Employee { setName (name) { this.name = name; } getName () { return this.name; } setAge (age) { this.age = age; } getAge () { return this.age; } }; |
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:
1 2 3 4 | new ClassName; //hoặc new ClassName(); |
Where
classNameis the name of the object you want to initialize.
For example: I will initialize the Employee object declared in the above example.
1 2 | new Employee(); |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | class Employee { constructor (name, age) { this.name = name; this.age = age; } setName (name) { this.name = name; } getName () { return this.name; } setAge (age) { this.age = age; } getAge () { return this.age; } }; |
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.
Syntax:
1 2 3 4 | class A extends B { //code } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 | class MaleEmployee extends Employee { constructor (name,age,wifeName) { super(name,age); this.wifeName = wifeName; } setWifeName (wifeName) { this.setWifeName; } getWifeName () { return this.wifeName; } } |
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:
super.methodName();
Where, methodName is the method of the parent class that you want to call.
For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class Employee { getClassName () { return "Class Employee"; } }; class MaleEmployee extends Employee { getClassName () { return "Class MaleEmployee"; } classClassName () { return super.getClassName(); } } var employee = new MaleEmployee(); console.log(employee.classClassName()); //kết quả: Class Employee |
And you can also call the parent class method while it’s in that subclass (in the rewrite method itself).
For example:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | class Employee { getClassName () { return "Class Employee"; } }; class MaleEmployee extends Employee { getClassName () { return "Class MaleEmployee - " + super.getClassName(); } classClassName () { return super.getClassName(); } } var employee = new MaleEmployee(); console.log(employee.getClassName()); //kết quả: main.js:15 Class MaleEmployee - Class Employee |
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:
1 2 3 4 5 6 | class Employee { static defaultEmployee () { return "Đây là phương thức defaultEmployee"; } }; |
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:
1 2 | className.staticMethodName(); |
Inside:
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.
1 2 3 | console.log(Employee.defaultEmployee()); //kết quả: Đây là phương thức defaultEmployee |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | class Employee { constructor (name, age) { this.name = name; this.age = age; } set employeeName (name) { this.name = name; } get employeeName () { return this.name; } set employeeAge (age) { this.age = age; } get employeeAge () { return this.age; } }; |
Now we will use the setter getter as we do with a regular property.
For example:
1 2 3 4 5 6 7 8 | //khởi tạo đối tượng var employee = new Employee(); //setter employee.employeeName = "Hoàng Minh Khánh" //getter employee.employeeName; //kết quả: Hoàng Minh Khánh |
Or you can also setter and getter by directly accessing the class without initializing.
1 2 3 4 5 6 | //setter Employee.employeeName = "Hoàng Minh Khánh" //getter Employee.employeeName; //kết quả: Hoàng Minh Khánh |
Epilogue
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 https://toidicode.com/classes-trong-es6-340.html