js デザイン パターン: デコレータ パターンとは何ですか? JSデコレータパターンの紹介

この記事では、JS デザイン パターンに関するコンテンツを提供します: デコレータ パターンとは何ですか? js デコレータ モードの紹介は、参考にしていただければ幸いです。

デコレータパターンとは何ですか?

定義: 追加の責任をオブジェクトに動的に追加します。機能の追加という点では、デコレータ パターンはサブクラスを生成するよりも柔軟です。

主な解決策: 一般に、クラスを拡張するには継承を使用することがよくあります。継承によってクラスに静的な機能が導入され、拡張機能が増加するとサブクラスが拡張されます。

いつ使用するか: 多くのサブクラスを追加せずにクラスを拡張します。

解決方法: 特定の機能責任を分割し、デコレータ パターンを継承します。

JS デコレーター パターンの適用例: 1. 孫悟空は「寺院」になると、基本的には猿のままですが、寺院の機能を持ちます。 2. 絵画は額縁の有無に関係なく壁に掛けることができますが、通常は額縁があり、その額縁が実際に壁に掛けられます。壁に掛ける前に、絵画に釉薬をかけて額装することができ、絵画、ガラス、フレームが 1 つのオブジェクトを形成します。

js デコレーター パターンの利点: 装飾クラスと装飾クラスは独立して開発でき、相互に結合されません。装飾パターンは、実装の機能を動的に拡張できます。クラス。

JS デコレータ パターンの欠点: 多層装飾はより複雑です。

js デコレータ パターンの使用シナリオ: 1. クラスの機能を拡張します。 2. 機能を動的に追加し、動的にキャンセルします。

注: は継承の代わりに使用できます。

js デコレーター パターンの例

実生活での例: 天気が寒いときは、暖かく保つために服を着ます。天気が暑いときは、コートを脱ぎます。この例は、天気に合わせてデコレーターの魅力を鮮やかに捉えています。気温や気温の変化に応じてダイナミックに衣服を着脱できます。

let wear = function() {
  console.log('穿上第一件衣服')
}

const _wear1 = wear

wear = function() {
  _wear1()
  console.log('穿上第二件衣服')
}

const _wear2 = wear

wear = function() {
  _wear2()
  console.log('穿上第三件衣服')
}

wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

この方法には次の欠点があります: 1: 一時変数がどんどん増えていきます; 2: このポインタが時々おかしくなります

AOP 装飾関数

// 前置代码
Function.prototype.before = function(fn) {
  const self = this
  return function() {
    fn.apply(this, arguments)
    return self.apply(this, arguments)
  }
}

// 后置代码
Function.prototype.after = function(fn) {
  const self = this
  return function() {
    self.apply(this, arguments)
    return fn.apply(this, arguments)
  }
}

上記の服を着るデモを試してみてください。

const wear1 = function() {
  console.log('穿上第一件衣服')
}

const wear2 = function() {
  console.log('穿上第二件衣服')
}

const wear3 = function() {
  console.log('穿上第三件衣服')
}

const wear = wear1.after(wear2).after(wear3)
wear()

// 穿上第一件衣服
// 穿上第二件衣服
// 穿上第三件衣服

しかし、これはネイティブ関数を汚染することがあります。いくつかの変更を加えることができます

const after = function(fn, afterFn) {
  return function() {
    fn.apply(this, arguments)
    afterFn.apply(this, arguments)
  }
}

const wear = after(after(wear1, wear2), wear3)
wear()

関連する推奨事項:

js デザイン パターン: メディエーター パターンとは何ですか? JS メディエーター パターンの紹介

js デザイン パターン: 責任連鎖パターンとは何ですか? JS 責任連鎖パターンの紹介

js デザインパターン: フライウェイト パターンとは何ですか? JSフライウェイトモードの紹介

以上がjs デザイン パターン: デコレータ パターンとは何ですか? JSデコレータパターンの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。