ES6 javascript inheritance

by vsasikalabe Updated: Mar 24, 2023

Guide Kit

Inheritance takes all the functionality from a parent class and allows you to add more. A class can inherit all the methods and properties of another class by using class inheritance. Inheritance has code reusability features.

We can also implement inheritance to make the child inherit all Parent Class methods. This can be done by the extends and super keywords. The extends keyword has been implemented for inheritance in ES6. The child class is extended to call a base class or parent class. It is called a derived class or child class. In the constructor, the super() method is used to access all parent properties and methods the derived class uses. ES6 Javascript supports the concept of inheritance. Inheritance is the ability to create new entities from an existing entity. The class extended to create newer classes is called the parent or super class. The new classes are known as the child or sub-classes. Child classes inherit all properties and methods from the parent class except constructors.

The syntax for the inheritance:

class child_class_name extends parent_class_name

Types of Inheritance:

Single-level inheritance - an inheritance in which the child class can only inherit the properties from one parent class
Multiple inheritances - an inheritance in which a class can inherit the properties from the various classes. ES6 doesn’t support multiple inheritances.
Multi-level inheritance is an inheritance in which a child class inherits the properties from another child class, inherits from the parent class, and so on.

Here is an example of how to do ES6 Javascript Inheritance:

Preview of the output that you will get on running this code from your IDE.

Code

ES6 javascript inheritance

JavaScriptLines of Code : 33License : Strong Copyleft (CC BY-SA 4.0)

sayHelloAndBye() {
    Person.prototype.sayHello.call(this);
    console.log('Bye');
}

class Person {
    constructor(name) {
        this.name = name;
    }
    
    sayHello() {
        console.log('Hello, my name is ' + this.name);
    }
    
    sayHelloAndBye() {
        Person.prototype.sayHello.call(this);
        console.log('Bye');
    }
}

class Student extends Person {
    constructor(name, grade) {
        super(name);
        this.grade = grade;
    }
    sayHello() {
        console.log(`Hi, I'm a studend and my name is ` + this.name);
    }
}

let b = new Student("Some guy", 5);

b.sayHelloAndBye();

Instructions

Follow the steps carefully to get the output easily.

Download and Install VS Code on your Computer.
Open the VS Code and install Javascript ES6 Code Snippet and Code Runner from Extensions.
Open the new file and save it as example.js (functions.js)
Copy the code using the "Copy" button above, and paste it into your Javascript file. (Remove the first 4 lines of the code)
Run the code using (ctr+alt+N) Run button.

I hope you found this useful. I have added version information in the following sections.

I found this code snippet by searching for ' ES6 javascript inheritance ' in kandi. You can try any such use case!

Environment Tested

I tested this solution in the following versions. Be mindful of changes when working with other versions.

The solution is created in VS Code 1.73.1 version.
JavaScript (ES6) code snippets v1.8.0
Code Runner v0.12.0

Using this solution, we are able to do ES6 javascript inheritance with simple steps. This process also facilities an easy way to use, hassle-free method to create a hands-on working version of code which would help us to do ES6 javascript inheritance.

Support

For any support on kandi solution kits, please use the chat
For further learning resources, visit the Open Weaver Community learning page

Open Weaver – Develop Applications Faster with Open Source

Terms
Privacy policy

ES6 javascript inheritance

Code

Instructions

Environment Tested

Support

Open Weaver – Develop Applications Faster with Open Source

kandi

Community and Support

Company

Follow