How to extend some class in ECMAScript 6 ?

The classes are the blueprint to represent the real-world object so that we can easily manipulate, access, and use them in programming. It is defined to create an abstract data type to store some kind of information along with the methods on which can manipulate that information.

Let’s understand class with the help of examples.

Example: Here we are showing an example of the Person class. The class can be created by writing keyword class before the name and the entire code is to be written inside the { } curly braces. You can see a constructor function that has been used to instantiate the object. The personInfo method is the getter method that is used to return the information or property related to the object. After the class declaration, we can create the object with it as we did in lines 13 and 14. Later we are simply printing the information about the object person. 

Javascript

class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;
    }

    get personInfo(){
        return (`The name of person is ${this.personName} of Age
                ${this.personAge} and gender ${this.gender}`);
    }
}

let person1 = new Person("Mr. Twinkle Sharma", "20", "Male");

console.log(person1.personInfo);

Output:

Inheritance: Earlier we have discussed the theories of class now it is time to explain what is the concept of extending a class. Let’s start with a real-world example, The person is a generalized term for each person in this world now what if we want to create the person class according to some specialization. There can be two options.

1. Either we write the entire code from starting.
2. Extend the code already being written in the Person class, because it is a generalization. This is called inheritance.

Inheritance is the concept of Object-oriented programming techniques to reuse the already written code of a generalized class by extending it to make a specialized class. For example, the person class is a standard class and we can create a student which is also a person but has some extra specialization like a person can have age, name, gender but the student can also have the standard in which he is studying, marks and grade, the college name, etc. 

How to Extend a class in ES6?

The process to extend the class in es6 is simple, all you have to do is to write the extend keyword after the class name and then write the name of the class which you are extending.

Syntax:

class ChildClass extends ParentClass{  // Definition }

Note: The class which extends some classes is called a child class and the other one is called a parent class.

Example 1: Here we are going to extend the Person class to create a Student class.

In the starting we have written the person class which was used in the earlier examples, later we are extending the student class. Inside the student class first of all there is a constructor which will be used to initialize the objects. Notice we are calling a function super by passing three parameters because it is necessary to call the constructor of the parent before the child constructor executes. you can clearly notice here we have two more properties inside the constructor which shows the concepts of extending class. 
Later we have created two getters and setter methods to set and get the grade of the student, Finally out of the class we have created one student object by passing the required parameters to the constructor. 

Javascript

class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;
    }

    get personInfo(){
        return (`The name of person is ${this.personName} of Age
                ${this.personAge} and gender is ${this.gender}`);
    }
}

class Student extends Person{
    constructor(personName, personAge, gender, standard, collegeName){
       super(personName, personAge, gender);
       this.standard = standard;
       this.collegeName = collegeName;
    }

    get studentInfo(){
        return (`The name of student is ${this.personName} and in
               ${this.standard} from College ${this.collegeName}`);
    }

    get grade(){
        return this._grade;
    }

    set grade(grade){
        console.log("Inside the setter Function")
        this._grade = grade;
    }
}

let student1 = new Student("Mr. Twinkle Sharma", "20", "Male",
                            "Engineering", "MMMUT");
console.log(student1.studentInfo);
console.log(student1.personInfo);

student1.grade = 'B';
console.log("Grade of Student is:-", student1.grade);

Output: 

Explanation: The first line is being printed because of calling the method studentInfo, the second line is printing because we have extended the person class so each object of student class can access the methods of the parent class. After then we are setting the grade as B that why the line is being printed Finally, it is printing the grade of the student.

Example 2: In this another example we are going to extend the Person class to create an Employee class.

 First of all there is a Person class which is going to be extended by the Employee class, Then we have written the class definition. Inside the constructor, there is an extra property named employer which is being set using this, and the rest of the three are being passed to the super method. After constructor, there are a few getter and setter methods Here also we have created an extra function increaseSalary that can manipulate the salary property of the object. 

Javascript

class Person{
    constructor(personName, personAge, gender){
        this.personName = personName;
        this.personAge = personAge;
        this.gender = gender;
    }

    get personInfo(){
        return (`The name of person is ${this.personName} of Age ${this.personAge}
                and gender is ${this.gender}`);
    }
}

class Employee extends Person{
    constructor(personName, personAge, gender, employer){
       super(personName, personAge, gender);
       this.employer = employer;
    }

    get employeeInfo(){
        return (`The name of employee is ${this.personName} of
                Age ${this.personAge} works for ${this.employer}`);
    }

    get salary(){
        return this._salary;
    }
    set salary(salary){
        this._salary = salary;
    }

    get position(){
        return this._position;
    }
    set position(position){
        this._position = position;
    }

    increaseSalary(percent) {
        this.salary += this.salary*percent/100;
    }
}

let employee1 = new Employee("XYZ Sharma", "21", "Male",
                            "ABC Organization");
console.log(employee1.employeeInfo);

employee1.salary = 65000;
employee1.position = "Software Development Engineer";

console.log(employee1.salary, employee1.position);

employee1.increaseSalary(12.6);
console.log(employee1.salary);

Output:

Explanation: The first line is being printed because of employeeInfo method of the object, and then we have assigned the salary and position to the object now we can access this property of the object as well. In the end, we are increasing salary property by 12.6 percent due to which the final salary is being printed.