Explain sub-classes and inheritance in ES6 ❤️

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 w3wiki class will act as the parent class for both Officials and Beginner class. The Officials and Beginner class will be subclasses and they inherit some properties and methods from the parent class w3wiki.

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 w3wiki(name, desc) { 
    this.name = name; 
    this.desc = desc; 
} 
  
w3wiki.prototype.Officials = function Officials() { 
    console.log("I'm an Official."); 
    console.log("Community name is: ", this.name); 
}; 
  
w3wiki.prototype.Beginner = function Beginner() { 
    console.log("I'm an Geek."); 
    console.log("Community description is: ", this.desc); 
}; 
  
var GFG = new w3wiki( 
    "w3wiki", 
    "A computer science portal for all Beginner."
); 
  
GFG.Officials(); 
GFG.Beginner();

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 w3wiki { 
  constructor(name, desc) { 
    this.name = name; 
    this.desc = desc; 
  } 
  
  getCommunityName() { 
    return this.name; 
  } 
  
  getCommunityDescription() { 
    return this.desc; 
  } 
} 
  
class Courses extends w3wiki { 
  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( 
  'w3wiki', 
  'A computer science portal for all Beginner.', 
  'DSA - Self Paced Course', 
  'A complete guide to Data Structures and Algorithms.', 
); 
  
GFG.printValues();

Output:

Explain sub-classes and inheritance in ES6

Javascript

Javascript

Contact Us