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 중국어 웹사이트의 기타 관련 기사를 참조하세요!