es6에는 여러 유형의 데코레이터가 있습니다.

es6 데코레이터에는 두 가지 유형이 있습니다. 데코레이터는 클래스와 클래스 메소드에만 사용할 수 있으므로 다음과 같이 나눌 수 있습니다. 1. 클래스 전체를 장식하는 데 사용되는 클래스 데코레이터, 구문은 "@ 함수 이름"입니다. 2. 클래스 메소드 데코레이터는 클래스의 메소드를 장식하는 데 사용됩니다. 클래스의 경우 구문은 "@ 함수 이름 메서드 이름"입니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, ECMAScript 버전 6.0, Dell G3 컴퓨터.

es6 데코레이터에는 여러 유형이 있습니다.

es6 데코레이터에는 두 가지 유형이 있습니다.

Decorator는 클래스 관련 구문으로, 클래스 관련 메서드 및 속성에 주석을 달거나 수정하는 데 사용됩니다. 많은 객체 지향 언어에는 이 기능이 있습니다. 일반적으로 클래스와 관련되어 일반적인 메소드를 사용하지 마십시오.

데코레이터는 @ + 함수명으로 쓰는 함수입니다. 클래스 및 클래스 메서드 정의 앞에 배치할 수 있습니다. 데코레이터는 함수를 실행하고 클래스 또는 클래스 아래의 속성 메서드에 일부 제어 조건을 추가하는 것입니다.

데코레이터는 함수 호이스팅으로 인해 함수가 아닌 클래스와 클래스 메서드에만 사용할 수 있습니다.

1. 클래스 데코레이터

클래스 데코레이터는 클래스 전체를 데코레이터로 사용합니다.

예제는 다음과 같습니다.

@decorateClass
class Example {
    //...
}
 
function decorateClass(target) {
    target.isTestClass = true
}

위 코드와 마찬가지로 데코레이터 @ decorateClass는 전체 예제 클래스의 동작을 수정하고 추가합니다. 예제 클래스 isTestClass에 대한 정적 속성입니다. Decorator는 함수입니다. Decorator는 클래스 생성자 example.prototype.constructor.

2와 동일한 예제 클래스 자체입니다. 클래스 메소드 장식

예는 다음과 같습니다.

class Example {
    @log
    instanceMethod() { }
 
    @log
    static staticMethod() { }
}
 
function log(target, methodName, descriptor) {
  const oldValue = descriptor.value;
 
  descriptor.value = function() {
    console.log(`Calling ${name} with`, arguments);
    return oldValue.apply(this, arguments);
  };
 
  return descriptor;
}

위 코드와 마찬가지로 데코레이터 @log는 인스턴스 메소드인 인스턴스 메소드인 인스턴스 메소드와 정적 메소드인 staticMethod를 각각 장식합니다. @log 데코레이터의 기능은 원래 작업을 수행하기 전에 console.log를 실행하여 로그를 출력하는 것입니다.

【관련 추천:

javascript 비디오 튜토리얼

,

web front-end】

위 내용은 es6에는 여러 유형의 데코레이터가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!