ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 モディファイアは何に使用されますか?
ES6 では、デコレータは、「@関数名」として記述される ES5 の「Object.defineProperty」メソッドに依存して、クラスおよびクラス メソッドに注釈を付けたり変更したりするために使用されます。デコレータは実際には関数であり、通常は次のように記述されます。クラスとクラスメソッドの前に。修飾子をクラス、メソッド、および属性パラメータに挿入して、クラス、属性、メソッド、およびパラメータの機能を拡張できます。
このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。
デコレータ パターンを使用すると、既存のオブジェクトの構造を変更せずに、新しい機能を追加できます。このタイプのデザイン パターンは構造パターンであり、既存のクラスのラッパーとして機能します。
このモードは、元のクラスをラップする装飾クラスを作成し、クラス メソッド シグネチャの整合性を維持しながら追加機能を提供します。
ES6 では、デコレータ (Decorator) は、クラスおよびクラス メソッドに注釈を付けたり変更したりするために使用されるクラス関連の構文です。
デコレータは実際には関数であり、通常はクラスおよびクラス メソッドの前に配置されます。
@decorateClass
class Example {
@decorateMethods
method(){}
}上記のコードでは 2 つのデコレータが使用されており、そのうち @decorateClass() デコレータはクラス自体の Add で使用されています。または、クラスの機能を変更します。 @decorateMethods() デコレータは、クラス メソッドに注釈を付けたり変更したりするためにクラス メソッドで使用されます。
#デコレータはクラスとクラス メソッドにのみ使用できます。2 種類のデコレータの使用法をそれぞれ見てみましょうデコレータは、関数プロモートがあるため、関数ではなくクラスとクラス メソッドにのみ使用できます。
@decorateClass
class Example {
//...
}
function decorateClass(target) {
target.isTestClass = true
}
@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 中国語 Web サイトの他の関連記事を参照してください。