클래스 상속 extends

프로토타입에서는 상속 개념을 이용하기 위해서 프로토타입 체인이라는 것을 이용했습니다. 이 방법이 다소 복잡한 감이 있었는데요. ES6에서 class를 지원하면서 extends키워드를 통해 상속을 더 쉽게 구현할 수 있게 되었습니다.

class 클래스명 extends 부모_클래스명 {}

다음 코드는 프로토타입 체인을 이용해서 상속 개념을 구현한 코드입니다.

let Phone = function () {};

Phone.prototype.getCall = function () {
    return '전화 받기';
}

let SmartPhone = function () {
    Phone.call(this);
}

SmartPhone.prototype = new Phone();

let smartPhone = new SmartPhone();

console.log(smartPhone.getCall());

---

이 코드를 class명령과 extends를 사용해서 코드를 변경해보겠습니다.

class Phone {
    constructor() {}

    getCall() {
        return '전화 받기';
    }
}

class SmartPhone extends Phone{
  constructor() {}
}

let smartPhone = new SmartPhone();

console.log(smartPhone.getCall());

코드가 확실히 간결해지고 이해하기 쉬워졌습니다. extends를 사용했을 때의 오버라이딩과 메소드 추가도 구현해보겠습니다.

class Phone {
    constructor() {
    }

    getCall() {
        return '전화 받기';
    }
}

class SmartPhone extends Phone{
    constructor() {
        super();
    }
    getCall() {
        return '스마트폰 전화 받기 by class';
    }
    playMusic(){
        return '음악 재생';
    }
}

let smartPhone = new SmartPhone();

console.log(smartPhone.getCall());
console.log(smartPhone.playMusic());

super

방금 전의 자식 클래스에서 생성자에 super()라는 것이 등장했습니다. super는 부모 클래스의 생성자, 메소드를 호출하는데 사용되는 메소드입니다. 보통 부모 클래스의 생성자를 물려받거나, 부모 클래스의 메소드를 오버라이딩할 때 사용됩니다.

super는 다음과 같은 형태를 가집니다. 이때 인수로 전달하는 것은 물려받을 프로퍼티나 메소드의 인자를 전달합니다.

//생성자 super
super(인수, ...);

//메소드 super
super.method(인수, ...);

super도 구체적인 코드를 준비했습니다.

class Member {
    constructor(name) {
        this.name = name;
    }

    getInfo() {
        return '이름: ' + this.name;
    }
}

class Student extends Member {
    constructor(name, id) {
        super(name);
        this.id = id;
    }

    getInfo() {
        return super.getInfo() + ', 학번:' + this.id;
    }
}

let student = new Student('밤', '123456');

console.log(student.getInfo());

자식 클래스인 Student에서 name 프로퍼티는 부모 클래스의 것을 물려받아 쓰기위해 생성자에서 super(name)으로 전달했습니다. 또한 getInfo 메소드를 오버라이딩 하기 위해, 기존의 내용은 물려받고 학번을 출력하는 부분을 추가했습니다.