Types of Inheritance in ES6

Types of Inheritance

The term inheritance can be divided into following three parts-

Types of Inheritance in ES6
  • Single-level Inheritance
  • Multiple Inheritance
  • Multi-level Inheritance

Single-level Inheritance

The single-level inheritance can be defined as an inheritance in which the child class can only inherit the properties from one parent class. The single-level inheritance allows us to inherit the properties from the parent class that helps us to increase the reusability of the program code. It also helps us to modify the existing code with the new features. The program code will be less repetitive with the help of inheritance.

Types of Inheritance in ES6

Multiple Inheritance

The Multiple Inheritance can be defined as an inheritance in which a class can inherit the properties from the various classes. ES6 doesn’t support the multiple inheritance.

Types of Inheritance in ES6

Multi-level Inheritance

The Multi-level inheritance can be defined as an inheritance in which a child class inherits the properties from another child class, which inherited from parent class and so on. The multi-level inheritance has multiple base classes.

Types of Inheritance in ES6

Example

Here, we have an example to illustrate the multi-level inheritance.

class Animal
{
          eat()
{
          console.log(“eating”);
}
}
class Lion extends Animal
{
          roar()
{
          console.log(“roaring”);
}
}
class BabyLion extends Lion
{
          weep()
{
          console.log(“weeping”);
}
}
var a = new BabyLion();
a.eat();
a.roar();
a.weep();

Output

After the execution of the above example, we got the following output:

Types of Inheritance in ES6

Method Overriding with Class Inheritance

The method overriding is a common feature used in various programming languages. Method overriding is a mechanism used to enable derived class to redefine the methods of its base class.

Rules for defining the method overriding

  • The signature of the method must be same in both (derived and base) classes.
  • The method name also must be same in parent class as well in child class.

Example

We will try to understand the method overriding with the help of an example.

‘use strict’
class Base
{
          display ()
{
          console.log (“The display () method form Base class”);
}
}
class Derived extends Base
{
          display ()
{
          console.log (“The display () method form Derived class”);
}
}
var object = new Derived ();
object.display();

Output

In the above example, the superclass function has been modified in the derived class. So, after the execution of the code, we got the following output:

Types of Inheritance in ES6

Super Keyword

The super keyword is a new feature introduced in ES 2015 (ES6). The super keyword provides a facility for subclass to invoke the data members, properties, and constructor of its superclass.

The super[expr] and super.prop expressions are easily accessible in any method of object literals and classes.

Syntax

Super(arguments);

Example

‘use strict’
class Base
{
          display ()
{
          console.log (“The display () method form Base class”);
}
}
class Derived extends Base
{
          display ()
{
          super.display();
console.log (“The display () method form Derived class”);
}
}
var object = new Derived ();
object.display();

In the above example, the sub class extends the properties of its super class. These both classes have their own unique properties. We use the super keyword to import the properties from base class to derived class.

Output

After the execution of the above code, we got the following output:

Types of Inheritance in ES6

Getter and Setter Function

Setter

If there is a need to set the value of a property, we invoke the setter function. The setter function is determined by the set keyword.

Syntax of Setter function

set prop(value)
{
          ( . . . )
}
get[expression] (value)
{
          ( . . . )
}

Example

Here, we have an example to illustrate for the same-

Class Student
{
          constructor (rno, fname, lname)
{
          this.rno  = rno
          this.fname = fname
          this.lname = lname
          console.log(“constructor”)
}
set rollno (new rollno)
{
          console.log(“setter function”)
          this.rno = new rollno
}
}
let Student1 = new Student (‘001’, ‘Thompson’, ‘David’)
console.log(Student1)                                     // Setter function is invoked
student.rollno = 002
console.log(Student1)

Output

After the execution of the above code, we got the following output:

Types of Inheritance in ES6

Getter

If there is a need to fetch the value of a property then we invoke the getter function. The getter function is determined by the get keyword.

Syntax of getter function

get prop(value)
{
          ( . . . )
}
get[expression] (value)
{
          ( . . . )
}

Example

Here, we have an example to implement the getter function.

Class Student
{
          constructor (rno, fname, lname)
{
          this.rno  = rno
          this.fname = fname
          this.lname = lname
          console.log(“constructor”)
}
get fullName ()
{
          console.log (“getter function”)
          return this.fname + “ -” + this.lname
}
}
let Student1 = new Student (‘001’, ‘Thompson’, ‘David’)
console.log(Student1)                                    
console.log(Student1.fullName)                                   // Getter function is invoked

Output

After the execution of the code, we got the following output:

Types of Inheritance in ES6

Related Topics

Set in ES6

Set in ES6 A Set is a kind of object used to create a group of unique values. The values stored in a set can be string, literal, array, and integer....

6 minutes read.

Types of Inheritance in ES6

Types of Inheritance The term inheritance can be divided into following three parts- Single-level InheritanceMultiple InheritanceMulti-level Inheritance Single-level Inheritance The single-level inheritance can be defined as an inheritance in which the child class can...

5 minutes read.

Promises in ES6

Promises in ES6 A promise is used to represent some aspects that are finally fulfilled. It can also be resolved or discarded according to the operational output. In ES6, a promise...

8 minutes read.

Array Destructuring in ES6

Array Destructuring in ES6 The term ‘Destructuring’ is defined as dividing the complicated data structure into easier modules. The Destructuring syntax helps to extract the small segments from an array and the objects....

3 minutes read.

Decision-Making in ES6 | ECMAScript 6

Decision-Making in ECMAScript 6 The Decision-making structure or statements are used to determine one or more than one condition to be evaluated or tested. The Decision-making statement helps us to decide...

7 minutes read.

String in ES6

String in ES6 The term string can be defined as an object used to represent the sequence of the characters. The string is widely used to store a text-based value like...

9 minutes read.

ES6 | ECMAScript 6 Syntax

The term 'syntax' defines the grammar and spelling of any programming language. In Computer science, “Term syntax is a collection of some rules and regulations that determines the group of symbols used in...

8 minutes read.

Features of ES6 | ECMAScript 6

The ES6 or ECMAScript 2015 came with various exiting and new features. These features make it a more robust and updated programming language than ES5. Some of these new promising features are Const...

6 minutes read.

Object in ES6

Object in ES6 The term object can be defined as an instance that contains the group of key-value pairs. We can modify it using the life cycle of an object in...

6 minutes read.

Generator in ES6 | ECMAScript 6

ECMAScript 6 recommends a new way of working with iterators and functions. The way is named as generator or generator function. The ES 6 generator is a distinct type of function that...

5 minutes read.

Validation in ES6

Validation in ES6 The term validation can be defined as a mechanism to check the information given by the user is correct or not according to the requirements. If the data...

9 minutes read.

Arrow Function in ES6

Arrow Function in ES6  An Arrow function is a new concept recommended in ECMAScript 2015. It is also called “Fat Arrow Function.” It helps us to write the function more accurately. This function...

5 minutes read.

Module in ES6

Module in ES6 In ES6, the modules can be defined as a small chunk of program code stored in a file. The modules are used to modularize the source code with...

6 minutes read.

Object Destructuring in ES6

Object Destructuring in ES6 The term destructuring is referred to as the breakdown of the complex entities into simpler parts. It works like array destructuring. In the array destructuring, the values...

3 minutes read.

Dialog box in ES6

Dialog box in ES6 A dialog box can be defined as a regular type of window in the Graphical User Interface (GUI) of the operating system. It is also spelled as...

5 minutes read.

Template Literals in ES6

Template Literals in ES6            ES6 introduced a new feature called template literals. It facilitates us to define a multiline string and executes the string interpolation. The template literals are referred to...

3 minutes read.

Map Object in ES 6

Map Object in ES 6 ES 6 introduced a new feature that is included in JavaScript. In the previous versions of ECMAScript, if we want to perform mapping on values and...

5 minutes read.

Variables in ES6 | ECMAScript 6

Variables in ECMAScript 6 A Variable is a place in memory used to store a value. There are some rules for declaration of the variable- Variable Initialization Initialization is a process of locating and storing the initial...

4 minutes read.

Class in ES6

Class in ES6: The Class is a basic term in object-oriented programming (OOPs). A class helps to determine the prototype for modeling in real-world objects. It is used to formulate...

4 minutes read.

Loops in ES6 | ECMAScript 6

Loops in ECMAScript 6 A Loop statement can be defined as a group of instructions that are always repeated. In the computer programming language, the loops help us to execute a collection of instructions...

8 minutes read.