코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속

코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속

function object(o) {
    function F() {};
    F.prototype = o;
    return new F();
}

// 상속해줄 객체
var parent = {
    name : "Parent"
}

// 새로운 객체
var child = object(parent);

alert(child.name);    // Parent

 

구조

설명

• object라는 함수를 통해 객체 생성

• 프로토타입을 활용한 상속 패턴의 프로토타입 체인(__proto__ 링크를 통해 parent의 모든 기능을 가진다.)

 

 

예제)

// 부모 생성자
function Person() {
    // 부모 생성자 자신의 프로퍼티
    this.name = "Parent";
}

// 프로토타입에 추가된 프로퍼티
Person.prototype.getName = function() {
    return this.name;
};

// Person 인스턴스 생성
var person = new Person();

// 인스턴스를 상속
var child = object(person);

// 부모 자기 자신의 프로퍼티와 프로토타입의 프로퍼티가 모두 상속
kid.getName();         // Parent;

설명

• 프로토타입을 활용한 상속 패턴에서 부모가 객체 리터럴로 생성되어야 하는 것은 아니다(흔히 많이 쓰는 방식)

• 위의 코드는 생성자 함수를 통해 부모 생성. 

• 이 경우, 부모 객체 자신의 프로퍼티와 생성자 함수의 프로토타입에 포함된 프로퍼티가 모두 상속

 

예제) - 개선

// 부모 생성자
function Person() {
    // 부모 생성자 자신의 프로퍼티
    this.name = "Parent";
}

// 프로토타입에 추가된 프로퍼티
Person.prototype.getName = function() {
    return this.name;
};

// 상속
var kid = object(Person.prototype);

typeof kid.getName;      // 프로토타입안에 메서드 존재, function 출력
typeof kid.name;         // 프로토타입만 상속, undefined 출력

 

※ ECMAScript 5 추가 사항

• ECMAScript 5에서는 프로토타입을 활용한 상속 패턴이 언어의 공식 요소가 되었다.

• 즉, 위에서 사용한 object() 함수와 같은 기능을 가진 함수가 언어에 내장

• Object.create() 

 

 

 

출처 : JavaScript Patterns