JavaScript 주석: 데코레이터가 클래스에 주석 구문을 추가하는 방법

1. 데코레이터 제안 전 주석
2. 데코레이터 입문서
3. 데코레이터의 구문
4. 데코레이터의 평가
5. 호출 데코레이터
6. 데코레이터의 예

이 문서에서는 현재 JavaScript에서 주석이 어떻게 보이는지 설명합니다. 주석은 Java와 같은 언어의 고전적인 주석과 다르기 때문에 주석이라고 합니다.

그러나 2022년 4월 24일 현재 데코레이터는 여전히 3단계 제안입니다. 즉, 데코레이터는 아직 JavaScript에서 사용할 수 없습니다.

그러나 사용할 수 있게 되면 클래스 선언에 대한 주석 구문을 추가하는 방법을 제공할 것입니다.

데코레이터 제안 전 주석

JavaScript에서 데코레이터에 대한 제안 이전에 주석에 가장 가까운 것은 "use script" 지시어입니다. 예를 들어:

(function() {
'use strict';
// code in strict mode
})();

위의 코드에서 "use strict" 지시문은 함수 내에서 엄격 모드 실행을 유발합니다.

데코레이터 입문서

데코레이터 제안에서 데코레이터는 외부 동작을 변경하지 않고 메타 프로그래밍 및 값에 기능을 추가하는 데 사용할 수 있는 기능입니다. 그들은 다음 작업을 할 것입니다.

1. 수업
2. 수업방법
3. 클래스 필드
4. 클래스 접근자
5. 클래스 자동 접근자

이러한 요소에서 데코레이터를 호출한 후 데코레이터는 다음을 수행할 수 있습니다.

1. 데코레이터는 메서드를 다른 메서드로 바꾸거나 클래스를 다른 클래스로 바꿀 수 있습니다.
2. 데코레이터는 접근자 기능을 통해 데코레이션된 값에 대한 액세스를 제공할 수 있습니다.
3. 데코레이터는 꾸미고 싶은 값을 초기화할 수 있습니다.

데코레이터의 구문

데코레이터 제안은 현재 3단계에 있습니다. 그러나 Stage 2의 구문을 사용합니다. 따라서 다음은 데코레이터의 구문에 적용됩니다.

1. 그들의 표현은 일련의 변수로 제한됩니다. 또한 대괄호 표기법이 아닌 점 표기법을 사용하여 속성 액세스를 수행합니다.

   그러나 임의의 표현을 원할 경우 @(expression)을 사용할 수 있습니다.

2. 클래스 표현식과 클래스 선언을 꾸밀 수 있습니다.

3. 클래스 데코레이터는 내보내기 및 기본 뒤에 옵니다.

데코레이터의 평가

데코레이터의 평가는 다음 단계를 따릅니다.

1. 데코레이터 표현식은 계산된 속성 이름으로 평가됩니다.
2. 데코레이터는 클래스 정의 중에 함수라고 합니다. 이는 메서드를 평가한 후 프로토타입 및 생성자 전에 발생합니다.
3. 데코레이터는 생성자와 프로토타입을 한 번에 변경합니다.

호출 데코레이터

데코레이터를 호출하면 두 개의 매개변수를 받습니다. 이러한 매개변수는 다음과 같습니다.

1. 꾸미고 싶은 가치. 이 값은 클래스 필드의 경우 정의되지 않음입니다.
2. 데코레이션되는 값에 대한 정보가 포함된 컨텍스트 개체입니다.

데코레이터의 예

다음은 Decorator 제안의 유사한 코드에서 영감을 받은 샘플 코드입니다.

export function log(target) {
  if (typeof target.descriptor.value === 'function') {
    const original = target.descriptor.value;
    target.descriptor.value = function(...args) {
      console.log('arguments: ', args);
      const result = original.apply(this, args);
      console.log('result: ', result);
      return result;
    }
  }
  return target;
}

그런 다음 데코레이터는 다음과 같이 작동합니다.

import {log} from './decorators.js';

export default class DogSounds {
  @log
  barkSound() {
    console.log('woof');
  }

  @log
  say(to_say) {
    console.log(to_say)
    return 'The dog said ' + to_say
  }
}

위의 코드에서 @ 기호를 통한 데코레이터 적용이 Java와 같은 언어의 주석과 유사하다는 것을 알 수 있습니다.

1. JavaScript에서 데코레이터를 사용할 수 있습니까?

   아니요. 2022년 4월 현재 여전히 3단계 ECMA 제안이기 때문입니다.

2. JavaScript에서 데코레이터는 언제 사용할 수 있습니까?

   Decorators 제안이 Stage 4에 도달하고 ECMAScript의 다음 버전에 포함되면 JavaScript에서 Decorators를 사용할 수 있습니다.