TIL) 클래스 super, extends 사용 방법, 왜 사용하지?

 

 

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

const kim = new PersonPlus('kim', 10, 20);
console.log('kim.sum()',kim.sum());
console.log('kim.avg()',kim.avg());

// 출력값
kim.sum() 30
kim.avg() 15

 

 

👇 위 코드에서 PersonPlus라고 하는 클래스에서 'kim', 10, 20 외에 30이라는 값도 추가적으로 가지고 싶다면???

 

class Person{
	constructor(name, first, second){
    	this.name = name;
        this.first = first;
        this.second = second;
    }
    sum() {
    	return this.first + this.second;
    }
}
class PersonPlus extends Person{
	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;
    }
	avg() {
    	return (this.first + this.second + this.third) / 3;
    }
}

const kim = new PersonPlus('kim', 10, 20, 30);
console.log('kim.sum()',kim.sum());
console.log('kim.avg()',kim.avg());

➥ 이렇게 쓰느냐??? NO!!

 

식이 너무 길어지고, 상속이라는 개념이 무색해진다. 

 

해결방법 => super

부모 클래스를 불러서 부모 클래스에게 일을 시키고, 부모가 하지 못하는 일은 내가 하기!

 

super를 쓰면 더 간결하게 코드를 작성할 수 있다는 장점이 있고, 다른 사람이 보기에 더 깔끔해져서 유지 보수하기 좋아진다. 

---

super 의 두가지 용법

 

super뒤에 괄호()가 붙으면 부모 클래스의 생성자이다.

super 뒤에 점.이 붙으면 부모 클래스를 통해 메서드를 불러온다. 

 

class Person{
	constructor(name, first, second){
    	this.name = name;
        this.first = first;
        this.second = second;
    }
    sum() {
    	return this.first + this.second;
    }
}
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;
    }
}

const kim = new PersonPlus('kim', 10, 20, 30);
console.log('kim.sum()',kim.sum());
console.log('kim.avg()',kim.avg());

// 출력값
kim.sum() 60
kim.avg() 20