3. class와 상속,super

class란 무엇일까?

자바스크립트에서 class란 constructor와 마찬가지로 객체를 찍어내는 공장이다.
비유하자면 constructor에 양념을 조금 뿌려놓을거라고 보면된다.

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

Person이라는 클래스를 하나 만들었다
이때 주의할 점은 class 는 매개변수를 지정할때 꼭 constructor를 적어주어야 한다는 점이다.

또한 메소드를 적어줄때는 메소드이름() {내용} 식으로 적어주는 점이 기존 constructor와는 다르다.

class 역시 사용할때는 new를 붙여서 constructor라는것을 표시해준다.

var kim = new Person('kim', 20, 30);

var kim = new Person('kim', 20, 30);
kim.sum = function(){
    return 'this: ' + (this.first+this.second);
}

또한 이런식으로 class 밖으로나와 변수의 함수를 지정해주면 이 함수가 먼저 실행된다.

즉, class 안의 sum()메소드 보다 var kim밑에 적어준 kim.sum() 함수가 우선실행된다.

상속

상속은 부모객체의 속성을 그대로 자식요소에게 전달하는것을 의미한다.
상속은 어떨때 필요할까?
예를들어 내가 만들지 않고 받아온 class가 있다.
이 class를 수정하고싶은데 원본은 수정하면 공유에 문제가 있고, 이 class를 복사한후 다른 class를 만들어 기능을 추가하면 '코드의 중복'이 생긴다.
그러므로 상속을 이용하여 기능을 추가할 수 있다.

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

상속기능은 (상속할 자식개체 extends 부모개체)로 정의한다.
-> class PersonPlus extends Person

예시에서는 평균을 구해주는 기능을 추가시켰다.

상속된 class를 사용할때는 다른 class의 사용과 마찬가지로

var kim = new PersonPlus('kim', 20, 30);
console.log(kim.avg());

new를 붙인뒤 class이름을 넣어 사용하면 된다.

super

상속을 받는건 좋은데 상속의 constructor 내용을 다르게 하고 싶으면 어떻게 할까?
이럴때 super를 사용한다.
super는 상속받는 부모매체로 부터 원하는 일부분만 상속받을 수 있게 해준다.

예) Person class(부모)로부터 PersonPlus class(자식)로 상속할때 매개변수로 first만 받으려면?
또한 PersonPlus의 매개변수로 third라는 항목을 추가시키려면?

class Person{
    constructor(name, first, second) {
        this.name = name;
        this.first = first;
        this.second = second;
    }
}
.
class PersonPlus extends Person {
    constructor(name, first, third) {
        super(name, first);
        this.third = third
    }
}

1. PersonPlus class의 constructor 매개변수에 원하는 매개변수인 name, first, third를 적는다.
2. constructor내용에 super(name, first);를 적어준다.
   -> 이는 부모요소의 constructor로부터 name과 first만을 상속받겠다는 뜻이다.

또한 super를 이용하여 메소드의도 상속받을 수 있다.

예) Person class(부모)의 sum()함수를 상속받아 PersonPlus class에서
first + second + third를 모두 더하는 함수 sum()을 만들어라

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;
    }
}
var kim = new PersonPlus('kim', 20, 40, 100);
console.log(kim.sum());  #160

이런식으로 부모 class의 메소드까지 이용할 수 있다!