DEV Community

Kurapati Mahesh
Kurapati Mahesh

Posted on

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

Use

Code reusability

Latest comments (0)