ホームページ >ウェブフロントエンド >フロントエンドQ&A >es6 にはいくつかの種類のデコレータがあります

es6 にはいくつかの種類のデコレータがあります

WBOY
WBOYオリジナル
2022-04-25 18:55:481668ブラウズ

es6 デコレータには 2 種類があります。デコレータはクラスとクラス メソッドにのみ使用できるため、次のように分類できます: 1. クラス デコレータ、クラス全体を装飾するために使用され、構文は「@ 関数名」です。 2. クラス メソッド デコレータ、クラスのメソッドを装飾するために使用されます。クラスの場合、構文は「@関数名メソッド名」です。

es6 にはいくつかの種類のデコレータがあります

このチュートリアルの動作環境: Windows 10 システム、ECMAScript バージョン 6.0、Dell G3 コンピューター。

es6 デコレータにはいくつかの種類があります

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。