HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
ES6 introduced classes
ES6 introduced classes.
A class is a type of function, but instead of using the keyword
function
to initiate it, we use the keyword
class
, and the properties are assigned inside a
constructor()
method.
A simple class constructor:
class Car {
constructor(name) {
this.brand = name;
}
}
Notice the case of the class name. We have begun the name, "Car", with an uppercase character. This is a standard naming convention for classes.
Now you can create objects using the Car class:
Create an object called "mycar" based on the Car class:
class Car {
constructor(name) {
this.brand = name;
}
}
const mycar = new Car("Ford");
Note: The constructor function is called automatically when the object is initialized.
You can add your own methods in a class:
Create a method named "present":
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
const mycar = new Car("Ford");
mycar.present();
As you can see in the example above, you call the method by referring to the object's method name followed by parentheses (parameters would go inside the parentheses).
To create a class inheritance, use the extends
keyword.
A class created with a class inheritance inherits all the methods from another class:
Create a class named "Model" which will inherit the methods from the "Car" class:
class Car {
constructor(name) {
this.brand = name;
}
present() {
return 'I have a ' + this.brand;
}
}
class Model extends Car {
constructor(name, mod) {
super(name);
this.model = mod;
}
show() {
return this.present() + ', it is a ' + this.model
}
}
const mycar = new Model("Ford", "Mustang");
mycar.show();
The super()
method refers to the parent
class.
By calling the super()
method in the
constructor method, we call the parent's constructor method and gets access to
the parent's properties and methods.
To learn more about classes, check out our JavaScript Classes section.