従来のオブジェクト指向言語では、オブジェクトに関数を追加することはしばしば継承を使用しますが、継承方法は問題をもたらします。親クラスが変更されると、すべてのサブクラスがそれに応じて変化します。
JavaScriptスクリプトが実行されている場合、オブジェクト（またはそのプロトタイプ）に動作を追加すると、そのオブジェクトのすべてのインスタンスに影響します。
デコレーターは、継承を実装する代替品であり、過負荷の方法の形を介して新機能を追加します。このパターンは、特定の目的を達成するために、デコレータの前後に独自の動作を追加できます。
デコレーターパターンは、既存の関数にさらに関数を動的に追加する方法です。装飾される各関数は別の関数に配置され、この関数を使用して既存の関数オブジェクトをラップして装飾します。したがって、特別な動作を実行する必要がある場合、呼び出しコードは、必要に応じてオブジェクトをラップするために装飾機能を選択的かつ順次使用できます。利点は、クラス（関数）の中核的な責任を装飾機能と区別することです。
ツール機能を次のように定義できます。
function.prototype.before = function（beforefn）{var self = this; //元の関数return function（）の参照を保存{//新しい関数と元の関数を含むプロキシ関数を返しますfn.apply（これ、引数）; //新しい関数を実行し、これがself.apply（これ、引数）をハイジャックしないことを確認します。 //元の関数を実行し、元の関数の実行結果を返し、これがハイジャックされないことを確認}}; function.prototype.after = function（afthfn）{var self = this; return function（）{var ret = self.apply（this、arguments）; afthfn.apply（これ、引数）;返品; }};ここにあるパラメーターとafthfn fnefnは、元の関数の新しい関数を拡張するための新しい関数（装飾を追加）です。それらの唯一の違いは、異なる実行順序です。関数のプロトタイプを汚染したくない場合は、次の方法を使用できます。
var before = function（fn、beforefn）{return function（）{beforefn.apply（this、arguments）; return fn.apply（これ、引数）; }}; var after = function（fn、afthfn）{return function（）{var ret = fn.apply（this、arguments）; afthfn.apply（これ、引数）; Retを返します。 }};例：CSRF攻撃を防ぐために、HTTPリクエストにパラメーターを配置します
var ajax = function（type、url、param）{console.log（param）; // ajax要求コードを少し送信...}; var beforefn = function（type、url、param）{param.token = 'token';}; ajax.before（ 'get' '、' http：//....com/userinfo '、 }トークンパラメーターをAjax関数に動的に装飾することにより、元の関数のパラメーターを直接変更する代わりに、Ajax関数は純粋な関数であり、その再利用性を改善し、変更なしで他のプロジェクトで直接使用できます。
例：フォーム検証（フォーム送信コードから検証入力を分離してから、フォームが送信される前に検証入力関数を動的に飾ります。このようにして、さまざまなプロジェクトで使用するために検証入力部分をプラグインフォームに書き込むことができます）
//入力関数var validata = function（）{if（username.value === ''）{alert（ 'username can couns emact'）; falseを返します。 } if（password.value === ''）{alert（ 'パスワードは空にすることはできません'）; falseを返します。 }}; // form submission function var formsubmit = function（）{var param = {username：username.value、password：password.value}; ajax（ 'http://xxx.com/login',param）;}; formsubmit = formsubmit.before（validata）; submitbtn.onclick = function（）{formsubmit（）;};参照：「JavaScriptパターン」「JavaScriptのデザインパターンと開発の実践」
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。