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 neveropen 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 neveropen.
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 neveropen(name, desc) { this.name = name; this.desc = desc; } neveropen.prototype.Officials = function Officials() { console.log("I'm an Official."); console.log("Community name is: ", this.name); }; neveropen.prototype.Geeks = function Geeks() { console.log("I'm an Geek."); console.log("Community description is: ", this.desc); }; var GFG = new neveropen( "neveropen", "A computer science portal for all neveropen."); 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 neveropen { constructor(name, desc) { this.name = name; this.desc = desc; } getCommunityName() { return this.name; } getCommunityDescription() { return this.desc; } } class Courses extends neveropen { 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( 'neveropen', 'A computer science portal for all neveropen.', 'DSA - Self Paced Course', 'A complete guide to Data Structures and Algorithms.', ); GFG.printValues(); |
Output:
