es6에서 데코레이터는 "@function name"으로 작성된 ES5의 "Object.defineProperty" 메서드를 사용하여 클래스 및 클래스 메서드에 주석을 달거나 수정하는 데 사용됩니다. 데코레이터는 실제로 함수이며 일반적으로 클래스 및 클래스 앞쪽에 배치됩니다. 방법의. 수정자를 클래스, 메소드 및 속성 매개변수에 삽입하여 클래스, 속성, 메소드 및 매개변수의 기능을 확장할 수 있습니다.
이 튜토리얼의 운영 환경: Windows 7 시스템, ECMAScript 버전 6, Dell G3 컴퓨터.
데코레이터 패턴을 사용하면 구조를 변경하지 않고도 기존 개체에 새로운 기능을 추가할 수 있습니다. 이러한 유형의 디자인 패턴은 기존 클래스를 감싸는 래퍼 역할을 하는 구조적 패턴입니다.
이 패턴은 클래스 메서드 시그니처의 무결성을 유지하면서 원래 클래스를 래핑하고 추가 기능을 제공하는 데코레이션 클래스를 만듭니다.
ES6에서 데코레이터(Decorator)는 클래스와 클래스 메서드에 주석을 달거나 수정하는 데 사용되는 클래스 관련 구문입니다.
데코레이터는 실제로 함수이며 일반적으로 클래스 및 클래스 메서드 앞에 배치됩니다.
@decorateClass class Example { @decorateMethods method(){} }
위 코드에서는 두 개의 데코레이터가 사용됩니다. @ decorateClass() 데코레이터는 클래스 자체에 사용되어 클래스의 기능을 추가하거나 수정합니다. 클래스. 클래스 메서드에 주석을 달거나 수정하는 데 사용되는 메서드입니다.
데코레이터는 함수 승격으로 인해 함수용이 아닌 클래스와 클래스 메서드에만 사용할 수 있습니다.
데코레이터는 클래스와 클래스 메서드에만 사용할 수 있습니다. 두 가지 유형의 데코레이터를 각각 사용하는 방법을 살펴보겠습니다.
클래스 데코레이터는 클래스 전체를 장식하는 데 사용됩니다.
target: 클래스 자체도 클래스 생성자 Class.prototype.constructor와 동일합니다.
@decorateClass class Example { //... } function decorateClass(target) { target.isTestClass = true }
위 코드에서처럼 데코레이터 @ decorateClass는 전체 예제 클래스의 동작을 수정하고 정적 속성 isTestClass를 예제 클래스에 추가합니다. Decorator는 함수입니다. Decorator는 클래스 생성자Example.prototype.constructor와 동일한 클래스 자체입니다. 데코레이터를 사용할 때 매개변수를 전달하려면 데코레이터 외부에 함수 레이어를 캡슐화하면 됩니다.
@decorateClass(true) class Example { //... } function decorateClass(isTestClass) { return function(target) { target.isTestClass = isTestClass } }
class MyReactComponent extends React.Component {} export default connect(mapStateToProps, mapDispatchToProps)(MyReactComponent);
@connect(mapStateToProps, mapDispatchToProps) export default class MyReactComponent extends React.Component {}
// descriptor对象原来的值如下 { value: specifiedFunction, enumerable: false, configurable: true, writable: true };
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; }
위에 구현된 데코레이터는 사용 시 매개변수에 전달될 수 없습니다. 데코레이터를 사용할 때 매개변수를 전달하려면 데코레이터 외부에 함수 레이어를 캡슐화할 수 있습니다.
class Example { @log(1) instanceMethod() { } @log(2) static staticMethod() { } } function log(id) { return (target, methodName, descriptor) => { const oldValue = descriptor.value; descriptor.value = function() { console.log(`Calling ${name} with`, arguments, `this id is ${id}`); return oldValue.apply(this, arguments); }; return descriptor; } }
클래스에서 클래스와 클래스 메서드를 동시에 장식하기 위해 데코레이터를 사용하는 경우 데코레이터의 실행 순서는 클래스 메서드 실행입니다. 데코레이터를 먼저 실행한 다음 클래스 데코레이터를 실행합니다.
// 类装饰器 function decoratorClass(id){ console.log('decoratorClass evaluated', id); return (target) => { // target 类的构造函数 console.log('target 类的构造函数:',target) console.log('decoratorClass executed', id); } } // 方法装饰器 function decoratorMethods(id){ console.log('decoratorMethods evaluated', id); return (target, property, descriptor) => { // target 代表 // process.nextTick((() => { target.abc = 123 console.log('method target',target) // })) console.log('decoratorMethods executed', id); } } @decoratorClass(1) @decoratorClass(2) class Example { @decoratorMethods(1) @decoratorMethods(2) method(){} } /** 输入日志 **/ // decoratorMethods evaluated 1 // decoratorMethods evaluated 2 // method target Example { abc: 123 } // decoratorMethods executed 2 // method target Example { abc: 123 } // decoratorMethods executed 1 // decoratorClass evaluated 1 // decoratorClass evaluated 2 // target 类的构造函数: [Function: Example] // decoratorClass executed 2 // target 类的构造函数: [Function: Example] // decoratorClass executed 1
如上面代码中,会先执行类方法的装饰器 @decoratorMethods(1) 和 @decoratorMethods(2),执行完后再执行类装饰器 @decoratorClass(1) 和 @decoratorClass(2)
上面代码中的类方法装饰器中,外层装饰器 @decoratorMethods(1) 先进入,但是内层装饰器 @decoratorMethods(2) 先执行。类装饰器同理。
function log(target, name, descriptor) { var oldValue = descriptor.value; descriptor.value = function () { console.log(`Calling "${name}" with`, arguments); return oldValue.apply(null, arguments); } return descriptor; } // 日志应用 class Maths { @log add(a, b) { return a + b; } } const math = new Maths(); // passed parameters should get logged now math.add(2, 4);
【相关推荐:javascript视频教程、web前端】
위 내용은 es6 수정자는 무엇에 사용됩니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!