코드 재사용 패턴(클래스 방식의 상속) - 기본패턴

코드 재사용 패턴(클래스 방식의 상속) - 기본패턴

 

요구사항

• 클래스 방식의 상속을 구현할 때의 목표는 Child()라는 생성자 함수로 생성된 객체들이 다른 생성자 함수인 Parent() 프로퍼티를 가지도록하는 것

// 부모 생성자
function Parent(name) {
    this.name = name || 'Adam';
}

// 생성자의 프로토타입에 기능 추가
Parent.prototype.say = function() {
    return this.name;
}

// 자식 생성자
function Child(name) {
}

// 상속(직접구현)
inherit(Child, Parent);

 

 

클래스 방식의 상속 패턴 - 기본패턴

function inherit(C, P) {
    C.prototype = new P();
}

var kid = new Child();
kid.say();                // Adam 출력

 

설명

• prototype 프로퍼티가 함수가 아니라 객체를 가리키고 있다.

• 프로토타입이 부모 생성자 함수 자체가 아니라 부모 생성자 함수로 생성한 객체 인스턴스를 가리켜야 한다.

• new 연산자 사용

• 부모 객체의 프로토타입에 추가된 프로퍼티와 메서드 + 부모 객체 자신의 프로퍼티 모두 물려받는다.

  부모 객체의 프로토타입에 추가된 프로퍼티와 메서드 : say

  부모 객체 자신의 프로퍼티(this에 추가된 인스턴스 프로퍼티) : name

 

상손된 후의 프로토타입 체인

    

 

설명

• kid.say() 호출 시 (3) new Child()로 생성된 kid에는 say 메서드가 없기 때문에 프로토타입 체인을 따라 (2) 객체를 탐색, (2) 객체에도 메서드가 없기 때문에 프로토타입 체인을 따라 (1) 객체까지 거슬러 올라가 탐색하여 메서드 발견

• 메서드 네부에서 this.name을 참조하기 때문에 다시 탐색, 이때 this는 (3) 객체를 가리키지만 name이 없기 때문에 (2) 객체로 프로토타입 체인을 따라 탐색하여 Adam 이라는 값을 얻게 도니다.

 

 

상속 후 자식 객체에 프로퍼티 추가

var kid = new Child();
kid.name = "Patrick";
kid.say();                              // Patrick 출력

 

    

 

설명

• kid.name 값을 지정하였을 경우, (2) 객체의 name 프로퍼티 값을 수정하는것이 아니라 (3) kid 객체에서 직접 자신의 프로퍼티 생성

• kid.say() 호출 시, (3)-(2)-(1) 순으로 say 메서드 탐색 후 this.name 값을 참조. 이번에는 (3) 객체에 name 값 존재하기 때문에 바로 찾을 수 있다.

• delete kid.name 호출하여 프로퍼티 삭제하면, kid.say() 호출 시 프로토타입 체인을 따라 name은 (2) 객체에서 찾게 된다.

 

기본 패턴의 단점

• 부모 객체의 this에 추가된 객체 자신의 프로퍼티와 프로토타입 프로퍼티를 모두 물려받는다.

• 대부분의 경우 객체 자신의 프로퍼티는 특정 인스턴스에 한정되어 재사용할 수 없기 때문에 필요가 없다.

• 재사용 가능한 멤버는 프로토타입에 추가해야 한다는 것이 구성 요소를 만드는 일반적인 원칙

 

 

 

 

 

출처 : JavaScript Patterns