티스토리 뷰
자바스크립트에서 상속이란 주제를 다룰 때 클래스 방식의 용어를 듣게 된다. 하지만 자바스크립트에는 클래스라는 개념이 없다. 자바스크립트는 매우 유연하고 동적인 언어이어서 상속패턴을 새롭게 구현을 해서 사용할 수 있다.
궁극적인 목표를 잊어서는 안된다. 자바스크립트에서 상속을 하는 이유는 코드를 재사용하기 위함이다. 상속은 하나의 방법이지 유일한 방법은 아니다. 코드의 재사용을 접근할 때 GOF가 한 말로 '클래스 상속보다 객체 합성을 우선시 해야한다' 라는 말을 주의 깊게 생각 해보자
[자바스크립트 코딩기법과 핵심패턴]의 내용에 의하면 5가지 클래스 방식의 상속 패턴을 사용할 수 있다.
1) 기본패턴
2) 생성자 빌려쓰기
3) 생성자 빌려쓰고 프로토타입 지정해주기
4) 프로토타입 공유
5) 임시 생성자
우선 기본패턴 부터 알아보자
<소스>
parent라는 부모함수를 생성하고 생성자의 프로토타입에 say()함수를 추가하였다.
<결과>
name에 값과 __proto__객체에 say:function() 이 있는 것을 확인 할 수 있다.
parent()함수를 생성시
아래의 그림과 같이 프로퍼티와, 함수를 찾아 나간다.
prototype은 생성자의 상위 객체라고 생각하면 편할 것이다.
name은 parent에 있으므로 쉽게 찾을 수 있고 say()함수는 parent에서 찾지 못한다. say()의 접근을 시도하면 parent의 __proto__라는 숨겨진 프로퍼티를 통하여 프로토타입에 접근하여 say()함수를 찾아 실행하게 된다.
생성자에도 없고 프로토타입에도 없으면 구문오류 에러를 내뿜게 된다.
위의 과정을 이해했다면 다음으로 넘어가자. 이해하지 못했으면 다시 읽어보고 그래도 이해안되면 직접 코딩을 해보는 것이 좋다.
우리가 알고 싶은 것은 프로토타입 체인방식이 아니라 자바스크립트의 상속이다.
다음의 상속된 예제를 보자
<소스>
자바스크립트에는 상속의 개념이 없으므로 inherit()라는 함수를 생성하였다.
inherit의 내용을 보면 부모의 함수를 P()를 자식의 프로토타입( C.prototype ) 에 연결한다.
<결과>
빨간색으로 네모친 부분을 parent에서 상속 받은 것이다
기본패턴의 단점
이 패턴의 단점은 부모 객체의 this에 추가된 객체 자신의 프로퍼티와 프로토타입을 모두 물려받게 된다. 또한 inherit()함수는 인자를 처리하지 못하는 문제도 있다. 즉 자식에서 생성자를 만들어 부모에게 넘겨주어도 인식하지 못한다.
결국 부모객체를 계속해서 재생성해야하고, 비효율적이다.