상속은 클래스 기반 언어에서 중요한 요소이며, 자바스크립트에서는 프로토타입 체이닝으로 흉내냄.
상속 구현 시, 클래스의 추상성을 유지하며 구체적 데이터를 지니지 않게 해야 함.
클래스 상속 문제
프로퍼티가 인스턴스 동작에 영향을 주는 문제.
상위 클래스 인스턴스를 하위 클래스의 프로토타입으로 설정할 때 주의점.
05 클래스 상속 구현 방법
SubClass.prototype에 SuperClass의 인스턴스를 할당 후 프로퍼티 삭제 클래스가 구체적인 데이터를 지니지 않게 하는 가장 간단한 방법은모든 프로퍼티들을 지우고 새로운 프로퍼티를 더 이상 추가할 수 없게 하는 것이다. 위 예제를 보면 SubClass의 prototype 내용을 정리하고 freeze하도록 되어 있다.
빈 함수(Bridge)를 활용한 다리 역할:
SubClass에 SuperClass의 인스턴스를 할당하는 대신 빈 생성자 함수(Bridge)를 하나 더 만들고 그 prototype이 SuperClass의 prototype을 바라보게 한 다음 SubClass의 prototype에는 Bridge의 인스턴스를 할당했다. 빈 함수에 다리 역할을 부여한 것이다.
Bridge라는 빈 함수를 만들고, Bridge.prototype이 Rectangle.prototype을 참조하게 한 다음, Square.prototype에 new Bridge()로 할당하면, 그림 7-9의 우측 그림처럼 Rectangle 자리에 Bridge가 대체된다.
위 예제를 범용성 있게 함수화한 코드이다. 즉시실행함수 내부에 Bridge를 선언해서 이를 클로저로 활용함으로써 메모리에 불필요한 함수 선언을 줄였다. subMethods에는 SubClass의 prototype에 담길 메서드들을 객체로 전달하게끔 했다.
Object.create 활용:
앞서 소개한 방법들 모두SubClass.prototype의 __proto__가 SuperClass.prototype을 참조하고, SubClass.prototype에는 불필요한 인스턴스 프로퍼티를 남가지 않는다는 면에서 동일하다.
06 클래스 상속 구현 시 주의 사항
Constructor 복구
SubClass 인스턴스의 constructor가 SuperClass를 가리키는 문제 해결 필요.
Bridge 활용 시, Bridge.prototype.constructor가 SuperClass를 바라보게 조정.
상위 클래스 접근
하위 클래스의 메서드에서 상위 클래스 메서드 호출 시 'super'를 흉내내는 기법 활용.
07 ES6의 클래스와 클래스 상속
ES5와 ES6 클래스 문법 차이
문법의 간결함: ES6에서는 class 키워드를 사용해 클래스를 정의하므로, 코드가 간결하고 직관적.
스태틱 메서드 정의: ES6에서는 static 키워드를 사용하여 클래스를 정의하는 것과 동일한 방식으로 스태틱 메서드를 쉽게 추가할 수 있음.
프로토타입 사용: ES5에서는 프로토타입을 통해 인스턴스 메서드를 추가해야 했지만, ES6에서는 클래스 내에서 직접 메서드를 정의할 수 있어 더 직관적.
ES6 클래스 상속
var Rectangle = class {
constructor (width, height) {
this.width = width;
this.height = height;
}
getArea() {
return this.width * this.height;
}
};
var Square = class extends Rectangle {
constructor (width) {
super(width, whidth);
}
getArea() {
console.log('size is :', super.getArea());
}
};
클래스 상속 (extends): Square 클래스는 Rectangle 클래스를 상속받아, 직사각형의 속성과 메서드를 활용하면서, 정사각형의 특성을 추가한다.
super 키워드: 부모 클래스의 생성자와 메서드를 호출할 때 사용되는데 super(width, width)로 부모 생성자를 호출하여 width와 height가 동일한 정사각형을 생성하고, super.getArea()로 부모의 메서드를 호출해 면적을 계산한다.
메서드 오버라이딩: Square에서 getArea()를 다시 정의하여 출력 형식을 다르게 처리한다. * 객체 지향 프로그래밍에서 상속받은 클래스(서브클래스)가 부모 클래스(슈퍼클래스)에 정의된 메서드를 재정의하여 사용하는 것을 의미
이 방식으로 코드의 재사용성과 유지보수성을 높여주며, 클래스 간의 관계를 명확하게 정의해준다.
