Front-end_dev
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호출할때 출력하는데 별의미없습니다(이예제에서는)
'ES6 > Syntax' 카테고리의 다른 글
simple iterator(generator) example (0) | 2018.12.11 |
---|---|
dynamically assigning name to function in ES6 & C++ (0) | 2018.12.07 |
2차원배열 생성기 및 인덱스범위 벗어날시 에러 강제 (0) | 2018.11.09 |
Promise 몸풀기 (0) | 2018.08.06 |
디자인패턴... (0) | 2017.04.05 |