javascript

코드 재사용 패턴

코드 재사용 패턴

Gof의 충고 ‘클래스 상속보다 객체 합성을 우선시 하라’

클래스 방식 vs 새로운 방식의 상속 패턴

클래스 방식의 상속을 사용할 경우 예상되는 산출물

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

가장 기본적인 방법으로 Parent()생성자를 사용해 객체를 생성한 다음, 이 객체를 Child()의 프로토타입에 할당하는것이다.

1
2
3
4
5
6
7
8
9
10
function inherit(C, P) {
    Child.prototype = new Parent();
}
var p = new Parent();
var p = {};
p.__proto__ = Parent.prototype;
Parent.apply(p, arguments);
//Parent.call(p, arg1, arg2[,arg3...]);

함수가 생성될때 일어나는 일

  1. 즉시 함수에 prototype 키를 만들고 오브젝트를 할당한다.
  2. prototype 오브젝트 안에는 constructor라는 키가 잡히고 함수 자신의 참조가 들어간다.

// 함수가 생성되면
function Alert();

// 1. 즉시 prototype이라는 이름의 키에 오브젝트가 생성되고
Alert.prototype = {};

이 과정은 절대로 일어나고 C 수준의 파서에서 관리하는 영역이다.
따라서 prototype은 함수 객체를 만들면

  1. 함수 객체에 정의되는 특별한 키이고, 그 키에 할당된 객체는 특별히 constructor 키가 언제나 정의 되어 있다.

    prototype을 new 와 함께 사용하기

new 가 어떻게 작동되는지 살펴봅시다.

var a = new Alert( ‘test’ );

// 1
a = {};

// 2
a.proto = Alert.prototype;

// 3
temp = Alert.apply( a, arguments );
if( typeof temp == ‘object’ || typeof temp == ‘function’ ) a = temp;

위의 2번 단계를 살펴보면 new 구문을 통해 Alert.prototype 에 대한 참조가 a 에게 proto 로 잡혀있음을 알 수 있습니다.
이것만 집중적으로 보려합니다. 함수의 정의부터 다시 복습해보면

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function Alert($msg) {
    this._msg = $msg;
}
Alert.prototype.action = function() {
    alert(this._msg);
};
var a = new Alert('test');
a.__proto__ = Alert.prototype; //2
// 이 코드를 새삼 다시 보면 아래와 같은 결론에 도달한다.
a.__proto__ == Alert.prototype;
a.__proto__.action == Alert.prototype.action;
참조가 같으니 Alert 의 프로토타입에 정의된 모든 속성은 전부 a.proto 도 참조할 수 있게 된다. 특히 constructor도 참조된다.
new  하면 constructor가 참조되는 비밀이 풀렸다.
a.__proto__.constructor = Alert.prototype.constructor = Alert;
a.action   // 이런 코드가 가능한 이유

proto 가 작동하는 방식

프로토타입 체인

프로토타입 체인 만들기

프로토타입 시스템 전반을 이용한 활용

inherit

클래스의 상속을 흉내내려면 어떤 함수의 prototype 에 들어갈 객체가 원하는 proto를 갖고 있으면 된다.
하지만 자바스크립트에서 proto를 설정하는 유일한 방법은 new 연산자 이다.

자식이 될 함수의 prototype에 new를 통해 부모 함수의 객체를 생성 할당한다.

copy

proto체인을 포기하고 인터페이스의 모든 구조를 복사한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
function Imp1() {}
function Imp2() {}
function Concreate() {
    // 한 개 밖에 안되잔아?
    Concreate.prototype = new Imp1();
    그렇다. 일자전승! 그냥은 한게 밖에 안된다. 유일한 방법은 Imp1 과 Imp2 의 키를 Concreate 에 복사하는 것이다.
    fro(key in Imp1) Concreate.prototpye[key] = Imp1[key];
    fro(key in Imp2) Concreate.prototpye[key] = Imp2[key];
}
Share