JavaScriptを深く理解するシリーズ(29)：デザインパターンのデコレータパターンを詳しく解説_JavaScriptスキル

はじめに

デコレータは、継承に対するより柔軟な代替手段を提供します。 デコレーターを使用すると、同じインターフェースでオブジェクトをラップすることができます。これにより、メソッドに動作を追加できるだけでなく、元のオブジェクト (デコレーターのコンストラクターなど) によって呼び出されるメソッドを設定することもできます。

デコレータは、オーバーロードされたメソッドの形式で新しい関数を追加するために使用され、特定の目的を達成するためにデコレータの前後に独自の動作を追加できます。

テキスト

それでは、デコレータ パターンの利点は何でしょうか?前述したように、デコレータは継承の代替手段です。スクリプトを実行すると、サブクラスに動作を追加すると、元のクラスのすべてのインスタンスに影響しますが、デコレータには影響しません。代わりに、さまざまなオブジェクトに新しい動作を個別に追加できます。次のコードに示すように:

コードをコピー コードは次のとおりです:

//装飾が必要なクラス(関数)
function Macbook() {
This.cost = function () {
1000 を返します;
};
}

関数メモリ(MacBook) {
This.cost = function () {
return macbook.cost() 75;
};
}

関数 BlurayDrive(MacBook) {
This.cost = function () {
return macbook.cost() 300;
};
}

機能 保険(MacBook) {
This.cost = function () {
return macbook.cost() 250;
};
}

// 使用法
var myMacbook = 新しい保険(新しい BlurayDrive(新しいメモリ(新しい Macbook())));
console.log(myMacbook.cost());

以下は別の例です。デコレータ オブジェクトで PerformTask を呼び出すと、いくつかのデコレータ動作が実行されるだけでなく、基になるオブジェクトの PerformTask 関数も呼び出されます。

コードをコピー コードは次のとおりです:

function ConcreteClass() {
This.performTask = function () {
This.preTask();
console.log('何かをしています');
This.postTask();
};
}

関数 AbstractDecorator(装飾) {
This.performTask = function () {
decorated.performTask();
};
}

関数 ConcreteDecoratorClass(装飾) {
This.base = AbstractDecorator;
This.base(装飾);

装飾.preTask = function () {
console.log('事前呼び出し..');
};

装飾.postTask = function () {
console.log('呼び出し後..');
};

}

varconcrete = new ConcreteClass();
vardecorator1 = new ConcreteDecoratorClass(concrete);
vardecorator2 = new ConcreteDecoratorClass(decorator1);
デコレータ2.performTask();

もう 1 つの完全な例:

コードをコピー コードは次のとおりです:

var ツリー = {};
Tree.decorate = function () {
console.log('木が倒れないように注意してください');
};

tree.getDecorator = function (deco) {
Tree[deco].prototype = this;
新しいツリー[デコ]を返します;
};

tree.RedBalls = function () {
This.decorate = function () {
This.RedBalls.prototype.decorate(); // ステップ 7: まず、プロトタイプのデコレート メソッドを実行します (これは Angel)
console.log('赤いボールを履いてください'); // ステップ 8 次に red を出力します
// この 2 つのステップを RedBalls のデコレートメソッドとして使用します
}
};

tree.BlueBalls = function () {
This.decorate = function () {
This.BlueBalls.prototype.decorate(); // ステップ 1: まず、プロトタイプのデコレート メソッド、つまり、tree.decorate()
を実行します。 console.log('青色のボールを追加'); // ステップ 2 次に、青色を出力します
// この 2 つのステップを BlueBalls のデコレート メソッドとして使用します
}
};

tree.Angel = function () {
This.decorate = function () {
This.Angel.prototype.decorate(); // ステップ 4: まず、プロトタイプのデコレート メソッドを実行します (これは BlueBalls)
console.log('上の天使') // ステップ 5 次に、angel
を出力します。 // この 2 つのステップを Angel のデコレートメソッドとして使用します
}
};

tree =tree.getDecorator('BlueBalls'); // ステップ 3: BlueBalls オブジェクトをツリーに割り当てます。この時点では、親プロトタイプの getDecorator はまだ利用可能です。 tree =tree.getDecorator('Angel'); // ステップ 6: Angel オブジェクトをツリーに割り当てます。この時点では、親プロトタイプの getDecorator はまだ利用可能です。 tree =tree.getDecorator('RedBalls'); // ステップ 9: RedBalls オブジェクトをtree
に割り当てます。
tree.decorate(); // ステップ 10: RedBalls オブジェクトのデコレート メソッドを実行します

概要

デコレータ パターンは、装飾される各関数を別の関数に追加し、特別な動作が必要な場合にこの関数を使用して既存の関数オブジェクトをラップする方法です。実行するために、呼び出し元のコードは、装飾関数を選択的かつ連続的に使用して、必要に応じてオブジェクトをラップできます。利点は、クラス (関数) と装飾関数の中核となる役割が分離されていることです。