프로토타입에서는 상속 개념을 이용하기 위해서 프로토타입 체인
이라는 것을 이용했습니다. 이 방법이 다소 복잡한 감이 있었는데요. 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.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 메소드를 오버라이딩 하기 위해, 기존의 내용은 물려받고 학번을 출력하는 부분을 추가했습니다.