ES7 decorator

아직 정식으로 최종(final release)되어 사용 할 수 있는 기능은 ES6(ES2015)까지 입니다. 

decorator는 나중에 나올 ES7의 새로운 feature이며, babel같은 트랜스파일러로 사용 해 볼 수 있습니다.

우선 decorater는 클래스 그 자체를 오버라이드(확장) 하거나, 클래스 내부의 프로퍼티(메서드)를 오버라이드(확장) 하는 것이라고 볼 수 있습니다.

첫번째 예제에서는 doSomething을 실행하기전, describe함수가 실행됩니다. 

각 파라미터들은,

target = class

name = doSomething

descriptor = property descriptor

입니다.

신기하게도 descriptor.value는 doSomething값을 갖고있고, writable, enumerable, configurable가 있습니다.

함수시간을 체크하는건데, doSomething을 실행하기전에 뭔가 처리해야할 로직이있다면, 이런식으로 활용 할 수 있습니다. (이예제에서는 doSomething이 2번호출됨)

두번째예제

이예제는 클래스 자체를 오버라이드 하는 예제 입니다.

아 처음에 말했어야했는데 decorater는 확장하고자하는 프로퍼티 혹은 클래스 바로 앞에 위치합니다. 

functions파라미터는 displayName와 output을 멤버로 갖는 객체이며 이 함수는 반드시 함수를 리턴해야 하며 그 함수의 첫번쨰 인자는 target(class)가 되야 합니다.

저도 이것에 대한 정확한 원리는 모르겠으나 많은 예제들을 살펴보면서 대충 추론해보면, 함수를 리턴하면, class로 인스턴스를 생성하기전에 어디선가 저함수가 먼저 실행이되고 그떄 이 함수를 실행할때 인자에다가 클래스집어너주고 함수실행한다음에  인스턴스가 실행되는것 같습니다.

한가지 더 볼 것은, target.prototype에다가 functions(displayName,output)을 위임(delegate) 혹은 연결합니다.

세번째 예제

이 예제에서는 진짜로 기존의 함수를 오버라이드 합니다.

descriptor.value에 새로운함수를 달아준걸 볼 수 있습니다.(여기서오버라이드)

그리고 오버라이드하기전에 기존함수를 백업해놨습니다(original변수)

자 그리고 여기서 sum함수를 호출하기전 log를 실행했습니다. log실행했고, 그다음 이제 sum이 호출되는데 이떄 sum은 오버라이드됬습니다.

마지막으로 log('some tag')부분은 그냥 문자열넘겨주는줘서 나중에 sum호출할때 출력하는데  별의미없습니다(이예제에서는)