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;
}

javascript 비디오 튜토리얼

web front-end】

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