자바스크립트 - 상속 ⬆

계승

📕 - 부모로부터 properties와 methods를 획득하는 메커니즘.

달성하자:

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

여기서 super()는 부모 클래스 생성자를 나타내며 extends는 상속에 사용되는 키워드입니다.

재정의

👨‍👧 자식 클래스는 부모와 동일한 속성 및 메서드를 가집니다.

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

정적 액세스

👨‍🦲 자식도 정적 속성 및 메서드에 액세스할 수 있습니다.

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

내장 클래스 상속

Javascript를 사용하면 Array , String , Map 등과 같은 내장 클래스에서 상속할 수 있습니다.

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

위의 경우 find는 내장Array의 메서드인 반면 MyArray 클래스에서 재정의됩니다.

사용

코드 재사용성