A JavaScript
class is a type of function. Classes are declared with the class keyword, and
always add a constructor method and this constructor method is called each time
when the class object is initialized
Defining a Class:
We use
keyword Class to create a class.
Here is an
example which demonstrates how to define the class “Person”
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
}
As we know,
the constructor method always be called, when the class Person will be initialized.
We will
create an instance of Person Class by using the new keyword, and can pass
values through constructor.
var _person = new Person("Henry", "Ford");
Here
is a complete example (HTML & JS)
<h2>JavaScript Class - Demo</h2>
<p id="personDiv"></p>
<script>
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
};
var _person = new Person("Henry", "Ford");
document.getElementById("personDiv").innerHTML = _person.firstName;
</script>
Defining a Method:
The constructor
of class is a default of method, it is used to initialize the class properties.
You can define own custom method.
Here is an
example which demonstrates how to define method name() in Person class to get person’s
full name
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
name() {
return this.firstName + ' ' + this.lastName;
}
};
Inheritance - Extending a Class:
We use keyword
extends to implement class inheritance and derived class inherits all properties
and method of base class.
We use
keyword super to call the constructor method of base class or parent class.
Here is an
example which demonstrates how to inherit Person Class and create an Employee
Class.
class Employee extends Person
{
constructor(firstName, lastName, employeeID,
department) {
super(firstName, lastName);
this.employeeID = employeeID;
this.department = department;
}
};
Here
is a complete example (HTML & JS)
<h2>JavaScript Class - Demo</h2>
<p id="personDiv"></p>
<p id="personDepartment"></p>
<p id="personEmpID"></p>
<script>
class Person {
constructor(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
name() {
return this.firstName + ' ' + this.lastName;
}
};
class Employee extends Person
{
constructor(firstName, lastName, employeeID,
department) {
super(firstName, lastName);
this.employeeID = employeeID;
this.department = department;
}
};
_person = new Employee("Henry", "Ford", 100, "IT");
document.getElementById("personDiv").innerHTML =
_person.name();
document.getElementById("personDepartment").innerHTML =
_person.department;
document.getElementById("personEmpID").innerHTML =
_person.employeeID;
</script>
