javascript 상속 관계도 질문 입니다.

안녕하세요 강속구 입니다. 답변이 달렸으면 좋겠는데....오늘 질문 드리고 싶은 내용은 상속에 관한 내용입니다. 머 "나 스크립트좀 써봤어!" ~ 라고한다면 스크립트로 상속 정도 구현하는건 별로 어려운 문제가 아닙니다. 선택의 문제가 되지요. 가장 무난한 조합이라고 일컬어 지는 apply, call 그리고 prototype 을 섞은 조합을 사용하기도 하고 임시 생성자를 이용해서 처리 하기도 합니다. 어떤걸 선택하든지 크게 문제는 안됩니다. 그때 그때 필요사항에 맡게 구현해서 사용하면 되지요. 문제는 임시 생성자를 이용한 상속 패턴 인데... 다른건 모르지만 이건 관계도가 제대로 그려진걸 제대로 본적이 없어서요.

1. apply, call 을 이용해서 생성자를 빌려쓰고 prototype을 이용해서 메소드 상속

위 패턴의 예제로 자주 쓰이는 부모 자식 코드 입니다.

  function Parent(psName) {
    this.name = psName || 'Adam';
  }

  Parent.prototype.say = function(){
    return this.name;
  }

  function Child() {
    Parent.apply(this, arguments);
  }

  Child.prototype = new Parent();

  var kid = new Child('baby');

아래 처럼 직관적이면서 깔끔하게 관계도가 그려집니다.

Child.prototype 에 IE 브라우저에서는 직접적으로 접근할수 없지만 내부적으로 객체에 존재하는 prototype을 가르키는 링크인

" proto " 가 다른 링크를 가르키도록 변경되게 (Child.prototype = new Parent();) 하고 실제 테스트를 해보면 의도한 대로 동작이 됩니다.

이제 관계도를 그릴때 문제가 되는 상속 패턴을 보도록 하겠습니다. 코드 자체는 동작 하고 의도한 대로 됩니다. 문제는 관계도가 제대로 안그려지기에 이해 하기가 난해 합니다.

1. 임시 생성자 패턴

   var iniHerit = function(){ var F = function(){}; return function(poParent, poChild){ F.prototype = poParent.prototype; poChild.prototype = new F(); poChild.prototype.constructor = poChild;
   } }();

   function Parent(psName) { this.name = psName || 'Adam'; }

   Parent.prototype.say = function(){ return this.name; }

   function Child() {
   Parent.apply(this, arguments);
   }

   iniherit(Parent, Child);
   var kid = new Child('hawa'); alert('kid.say : ' + kid.say)

결과를 예상해 본다면 원하는 결과가 나오게 됩니다. 간단히 관계도를 그려 본다면 다음과 같은 관계도가 될테구요.

문제는 자식 생성자함수 Child를 확장 할경우 발생합니다.

...//기존 코드 활용 iniherit(Parent, Child); Child.prototype.say2 = function(){ alert('say2'); }

Child.prototype.say3 = function(){ alert('say3'); }

say2 와 say3 라는 메소드를 추가하게 될경우 위 관계도 상에서 이 메소드가 위치하게 될 공간은 iniherit 함수의 영향으로(poChild.prototype = new F();) Parent.prototype 이 될겁니다.

그러므로 ...//기존코드 활용 var kid = new Child('hawa'); var kid2 = new Parent(); alert(kid2.say2)

관계도만 가지고 판단할때 kid2.say2 는 정상적으로 결과를 보여줘야 하지만 그렇지 못합니다. 즉 관계도가 성립이 안된다는 거지요. 코드야 거의 암기 하다 시피쓰고 있는 코드고 그냥 그러려니 하고 쓰다보니 딱이 어려움을 느끼지는 못하지만.... 관계도는 대체 어떻게 그려야지 깔금하게 설명이 될런지.. .... 어렵네요.

혹시 이부분에 대해서 명쾌히 그림을 그려주실 분이 있다면 답변좀 부탁 드리겠습니다.