[Javascript] 장식자(Decorator)

장식자(Decorator)는 하나의 코드를 다른 코드로 래핑하거나, Javascript 함수를 래핑하는 방법이다. 

데코레이터는 동일한 크래스의 다른 객체에 동작에 영향을 주지 않고, 정적으로 또는 동적으로 개별 객채에 동작을 추가할 수 있는 디자인 패턴이다.

기본 기능을 수정하지 않고 기능을 향상시키는데 사용된다. 

Decorator는 Python 및 C# 과 같은 언어에서 사용되었으며, Javascript 에서도 사용된다.

 

문법

let variable = function(object) {
  object.property = 'characteristic';
}

// Use as decorator
@variable   
class GFG
{ }
console.log(GFG.property);

예시

<script> 
// Working of decorators in javascript 
  
// "add" function takes the function as 
// a parameter for wrapping function  
// "print" is wrapped  
function add(fn) { 
  
  return function(s) { 
  
    var gg = s + ' is Best'; 
  
    // By concatenating we extend 
    // the function "add" 
    fn(gg); 
  } 
} 
  
// Decorated function 
function print(s) { 
  document.write(s); 
} 
  
// Calling "add" 
var g = add(print); 
g('GFG');  
</script> 

ES6에서 Decorator는 다른 함수나 코드로 래핑하는 효율적이고 이해하기 쉬운 방법을 허용하고, 명확한 구문을 제공한다. 

 

Decorator는 decorated 항목의 적절한 세부사항에 의해 호출된다.

Decorator는 다른 함수를 반환하는 함수이며, 현재 2가지 유형의 Decorator을 지원한다.

 

- Class member decorators

- Members of classes

 

클래스 멤버 데코레이터

이 Decorator는 클래스의 단일 멤버에 적용되며 attribute, method, getter, setter을 가지고 있다.

target(멤버가 속해있는 클래스), name(클래스의 멤버 이름), descriptor(멤버 디스크립터 객체) 3개의 매개변수를 받는다.

 

예시

// Decorator function  
function gfg(target, name, descriptor) { 
  var fn = descriptor.value; 
  
  // Checks if "descriptor.value" 
  // is a function or not 
  if (typeof fn == 'function') { 
    descriptor.value = function(...args) { 
   
      // Document.write(`parameters: ${args}`+"<br>"); 
      console.log(`parameters: ${args}`); 
      var result = fn.apply(this, args); 
   
      // Document.write(`addtion: ${result}`); 
   
      // Print the addition of passed arguments 
      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); 

 출력

parameters: 100, 200
addition: 300

 

클래스 데코레이터

이 데코레이터는 전체 클래스에 적용되며 단일 매개 변수로 호출된다.

생성자 함수인 이러한 데코레이터는 클래스의 각 인스턴스에 적용되지 않으며 생성자 함수에만 적용된다. 

 

예시

function log() 
  
// Decorator function 
{ 
  return function decorator() 
    { 
    // "arrow" function  
    return (...args) =>  
        { 
      console.log(`Parameters : args`); 
      return new Class(...args); 
    }; 
  } 
} 
  
// Decorators 
@log   
class gfg 
{ 
  constructor(name, category) {} 
} 
  
const e = new gfg('geek', 'code'); 
  
// Arguments for Demo: args 
console.log(e); 

출력

(...args) =>  
    {
      console.log(`Parameters : args`);
      return new Class(...args);
    }

 

# 참고자료

dev.to/dpksh/learn-javascript-class-decorators-in-5-minutes-4em7

www.geeksforgeeks.org/what-are-decorators-and-how-are-they-used-in-javascript/

www.sitepoint.com/javascript-decorators-what-they-are/