javascript super

문제 정의

아래와 같은 class 가 있을때 나는 Person 을 상속해서 PersonPlus 라는 class 를 만들고 싶다.

class Person{
    constructor(name, first, second){
        this.name = name;
        this.first = first;
        this.second = second;
    }
    sum(){
        return this.first+this.second;
    }
}

 

만약  PersonPlus의 constructor 에 third 라는 세번째 값을 추가 하고 싶다면 어떻게 해야할까?

다음처럼 상속없이 그냥 constructor  의 this 에 넣어주는 방법이 있을 것이다. 하지만 상속을 사용하면 코드를 재사용 할 수 있게된다.

class PersonPlus{
    constructor(name, first, second, third){
        this.name = name;
        this.first = first;
        this.second = second;
        this.third = third;
    }
    sum(){
        return this.first+this.second+this.third;
    }
}

 

다음과 같이 말이다. 이때 사용되는 것이 super 이다.

super 을 사용하면 상속된 Person을 호출 할 수 있게 되는 것이다.

따라서 바로 위 코드와 비교했을때 코드가 많이 줄어들었다.

class PersonPlus extends Person{
    constructor(name, first, second, third){
        super(name, first, second);
        this.third = third;
    }
    sum(){
        return super.sum()+this.third;
    }
    avg(){
        return (this.first+this.second+this.third)/3;
    }
}

또한 위 코드에서 눈여겨 볼 것이 하나 더 있는데 바로 super.sum() 이다.

Person의 sum 메소드를 사용할 수 있게 되는 것이다. 이것을 재사용해서 PersonPlus 에서 새로운 sum 메소드를 만들 수 있다.

 

참고자료

https://opentutorials.org/module/4047/24620

super - JavaScript 객체 지향 프로그래밍