코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속
2020. 3. 2. 15:12ㆍ웹/Javascript Pattern
코드 재사용 패턴(새로운 방식의 상속) - 프로토타입을 활용한 상속
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
'웹 > Javascript Pattern' 카테고리의 다른 글
디자인 패턴 - 싱글톤(Singleton) 패턴 (0) | 2020.03.02 |
---|---|
코드 재사용 패턴(새로운 방식의 상속) - 프로퍼티 복사를 통한 상속 패턴 (0) | 2020.03.02 |
코드 재사용 패턴(클래스 방식의 상속) - 프로토타입 공유 (0) | 2020.03.02 |
코드 재사용 패턴(클래스 방식의 상속) - 생성자 빌려쓰기 (0) | 2020.03.02 |
코드 재사용 패턴(클래스 방식의 상속) - 기본패턴 (0) | 2020.03.02 |