데코레이터 패턴
하나의 코드를 다른 코드로 래핑하거나 javascript 함수를 래핑하는 방법
동일한 클래스의 다른 객체에는 영향을 주지 않고, 정적/동적으로 개별 객체에 동작을 추가할 수 있는 디자인 패턴이다.
문법
1 2 3 4 5 6 7 8 9
let variable = function(object) { object.property = 'characteristic'; } @variable class GFG { } console.log(GFG.property);
현재는 아래 두가지 유형의 데코레이터를 지원함
- Class Member decorators
- Members of classes
클래스 멤버 데코레이터
- 클래스 단일 멤버에 적용되며, attribute, method, getter, setter를 가지고 있음
- 아래 3가지 매개변수를 받음
- target : 멤버가 속해있는 클래스
- name : 클래스의 멤버이름
- descriptor : 멤버 디스크립터 객체
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function gfg(target, name, descrioptor) {
var fn = descriptor.value;
if(typeof fn == 'function') {
descriptor.value = function(...args) {
console.log(`parameters : ${args}`);
var result = fn.apply(this, args);
console.log(`addition : ${result}`);
return result;
}
}
return descriptor;
}
class geek {
@gfg
add(a, b) {
return a + b;
}
}
var e = new geek();
e.add(100, 200);
1
2
parameters : 100, 200
addition : 300
클래스 데코레이터
- 전체 클래스에 적용되며 단일 매개변수로 호출됨
- 클래스의 각 인스턴스에 적용되지 않으며, 생성자 함수에만 적용된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function log() {
return function decorator() {
return (...args) => {
console.log(`Parameters : ${args}`)
return new Class(...args);
}
}
}
@log
class gfg {
constructor(name, category) {
}
}
const e = new gfg('geek', 'code');
console.log(e);
(...args) => {
console.log(`Parameter : ${args}`);
return new Class(...args);
}