Your Web News in One Place

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
September 18, 2022 09:20 am GMT

Javascript - Inheritance

Inheritance

- Mechanism which acquires properties and methods from the parent.

Let's achieve:

class Parent {    parentProperty;    constructor(parentProperty) {        this.parentProperty = parentProperty;    }    parentMethod() {        return 'I am parent class method';    }}class Child extends Parent {    constructor() {        super('parent property'); // setting parent property from child.    }    childMethod() {        console.log(this.parentMethod()); // accessing parent methods.        console.log(this.parentProperty); // accessing parent property.    }}const child = new Child();child.childMethod();> I am parent class method> parent property

Here, super() refers to parent class constructor and extends is the key word used to inherit.

Overriding

child class has same properties & methods like parent.

class Parent {    property = 'I am parent property';    method() {        return this.property;    }}class Child extends Parent {    // same parent property name.    property = 'I am child property';    // same parent method name.    method() {        console.log('I am a child method');    }}const child = new Child();child.method(); // overrides parent method and logs child details.console.log(child.property); // overrides parent property and logs child property> I am a child method> I am parent property

Accessing Static

child can also access static properties and methods.

class Parent {    static property = 'I am parent class static property';   static method() {        return 'I am parent class static method';    }}class Child extends Parent {}// We can call static entity with Class name directly.console.log(Child.property);console.log(Child.method());> I am parent class static property> I am parent class static method

Inherit Built-in classes

Javascript allows us to inherit from built-in classes like Array, String, Map etc.

class MyArray extends Array {    find() {        console.log('This is my array find method');    }}const myArray = new MyArray();myArray.find();> This is my array find method

In above case, find is the method of built-in Array whereas it is overridden in MyArray class.

Use

Code reusability


Original Link: https://dev.to/urstrulyvishwak/javascript-inheritance-26c3

Share this article:    Share on Facebook
View Full Article

Dev To

An online community for sharing and discovering great ideas, having debates, and making friends

More About this Source Visit Dev To