ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 にはいくつかの種類のデコレータがあります
es6 デコレータには 2 種類があります。デコレータはクラスとクラス メソッドにのみ使用できるため、次のように分類できます: 1. クラス デコレータ、クラス全体を装飾するために使用され、構文は「@ 関数名」です。 2. クラス メソッド デコレータ、クラスのメソッドを装飾するために使用されます。クラスの場合、構文は「@関数名メソッド名」です。
このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。
es6 デコレータには 2 つの種類があります。
Decorator (デコレーター) は、クラス (クラス) に関連する構文で、クラス関連のメソッドやプロパティに注釈を付けたり、変更したりするために使用されます。多くのオブジェクト指向言語にはこの機能があります。一般にクラスに関連するため、通常のメソッドは使用しないでください。
Decorator は関数であり、@ 関数名として記述されます。クラスおよびクラスメソッドの定義の前に配置できます。デコレータは関数を実行し、クラスまたはクラス配下の属性メソッドに制御条件を追加します。
デコレータはクラスとクラス メソッドにのみ使用でき、関数のプロモーションのため関数には使用できません。
1. クラス デコレータ
クラス デコレータはクラス全体を装飾するために使用されます
例は次のとおりです:
@decorateClass class Example { //... } function decorateClass(target) { target.isTestClass = true }
上記のコードのように、デコレータ @decorateClass は Example クラス全体の動作を変更し、静的属性 isTestClass を Example クラスに追加します。デコレータは関数です。decoratorClass 関数のパラメータ ターゲットは Example クラス自体であり、クラス コンストラクタ 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 はインスタンス メソッド instanceMethod を装飾し、それぞれ静的メソッド staticMethod。 @log デコレータの機能は、元の操作を実行する前に console.log を実行してログを出力することです。
【関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
以上がes6 にはいくつかの種類のデコレータがありますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。