Skip to content
Related Articles

Related Articles

Explain sub-classes and inheritance in ES6

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Mar, 2022

Sub-class: A subclass is a class that is derived from the properties and methods of some other class known as the Parent class for that subclass. A subclass allows us to change or update the properties of the parent class without disturbing it. A subclass can contain properties of the parent class as well as we can define the new properties inside it.

Here, In the above picture, the GeeksforGeeks class will act as the parent class for both Officials and Geeks class. The Officials and Geeks class will be subclasses and they inherit some properties and methods from the parent class GeeksforGeeks.

To provide properties of the parent class to a subclass we use inheritance: Inheritance is the way of extending a class by providing it some new properties and values using another class without even disturbing it. Inheritance can be done in two ways:

  • Prototypal Inheritance
  • Inheritance using extends keyword

Prototypal inheritance: The prototypal inheritance is done using the prototype keyword. The prototypal inheritance is the es5 syntax of inheritance.

Syntax:

function func_name(){
    // Content of func_name()
} 

func_name.prototype.func_name2(){
    // Content of func_name2()
}

Example: The example below illustrates the inheritance using the prototype keyword.

Javascript




function GeeksforGeeks(name, desc) {
    this.name = name;
    this.desc = desc;
}
  
GeeksforGeeks.prototype.Officials = function Officials() {
    console.log("I'm an Official.");
    console.log("Community name is: ", this.name);
};
  
GeeksforGeeks.prototype.Geeks = function Geeks() {
    console.log("I'm an Geek.");
    console.log("Community description is: ", this.desc);
};
  
var GFG = new GeeksforGeeks(
    "GeeksforGeeks",
    "A computer science portal for all geeks."
);
  
GFG.Officials();
GFG.Geeks();


Output:

Inheritance using extends keyword: es6 or ECMAScript-2015 introduces the concept of inheriting the properties of the parent class using the extends keyword. We will use the super() method inside the subclass to invoke the constructor function of the parent class. 

Syntax:

// Code for the parent class
class parent_class{
    constructor(){
        // Body of constructor
    }
}

// Code for the child or sub class
class sub_class extends parent_class{
    constructor(){
        super()  
        // Body of constructor
    }
}

Example:

Javascript




class GeeksforGeeks {
  constructor(name, desc) {
    this.name = name;
    this.desc = desc;
  }
  
  getCommunityName() {
    return this.name;
  }
  
  getCommunityDescription() {
    return this.desc;
  }
}
  
class Courses extends GeeksforGeeks {
  constructor(communityName, communityDesc,
  courseName, courseDesc) {
    super(communityName, communityDesc);
    this.c_name = courseName;
    this.c_desc = courseDesc;
  }
  
  printValues() {
  
    // You can also use 'this' keyword in place 
    // of 'super' to access properties and
    // methods of parent class
    console.log('The name of Community is: '
        super.getCommunityName());
    console.log('The description of Community is: '
        super.getCommunityDescription());
    console.log('The name of Course is: ', this.c_name);
    console.log('The description of Course is: ', this.c_desc);
  }
}
  
const GFG = new Courses(
  'GeeksforGeeks',
  'A computer science portal for all geeks.',
  'DSA - Self Paced Course',
  'A complete guide to Data Structures and Algorithms.',
);
  
GFG.printValues();


Output:


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!