導入
責任の連鎖とは、複数のオブジェクトがリクエストを処理する機会を得ることができるため、送信者とリクエストの受信者との間の結合関係を回避することです。オブジェクトをチェーンに接続し、オブジェクトが処理するまでチェーンに沿ってリクエストを渡します。
つまり、リクエストの後、最初のオブジェクトから開始して、チェーン内のリクエストを受信するオブジェクトは、個人的に処理するか、チェーンの次の候補に転送します。リクエストを送信するオブジェクトは、どのオブジェクトがそれを処理するかを正確に知りません。つまり、リクエストには暗黙のレシーバーがあります。実行時間によっては、候補者は対応するリクエストに応答できます。候補者の数は任意です。実行時にチェーンに参加する候補者を決定できます。
文章
JavaScriptの実装では、そのプロトタイプ機能を使用して責任チェーンパターンを実装できます。
コードコピーは次のとおりです。
var no_topic = -1;
varトピック;
関数ハンドラー（S、T）{
this.successor = s ||ヌル;
this.topic = t || 0;
}
handler.prototype = {
ハンドル：function（）{
if（this.successer）{
this.successor.handle（）
}
}、
持っている：function（）{
this.topic！= no_topic;
}
};
ハンドラーは2つのパラメーターを受け入れます。 1つ目は後継者（処理要求を渡すために使用される）で、2番目は通過レベル（特定のレベルで操作を実行するかどうかを制御するために使用できます）です。ハンドラーのプロトタイプは、このパターンを実装するための鍵であるハンドルメソッドを公開します。まず、上記のコードの使用方法を見てみましょう。
コードコピーは次のとおりです。
var app = new Handler（{
ハンドル：function（）{
console.log（ 'アプリハンドル'）;
}
}、3）;
varダイアログ= new Handler（App、1）;
var button = new Handler（ダイアログ、2）;
button.handle（）;
プロトタイプ機能を使用してコードを変更し、ボタンからコードを呼び出します。handle（） - > dialog.handle（） - > app.handle（） - > parameter handle（）。最初の3つは、プロトタイプを呼び出すすべてのハンドルです。最後に、通過したパラメーターのハンドルが見つかり、結果は出力です。つまり、最後のレイヤーのみが処理されます。
では、どのようにしてダイアログオブジェクトを呼び出すときに処理することができますか？実際、ダイアログインスタンスオブジェクトのハンドル方法を定義できますが、新しいボタンの前に実行する必要があります。コードは次のとおりです。
コードコピーは次のとおりです。
var app = new Handler（{
ハンドル：function（）{
console.log（ 'アプリハンドル'）;
}
}、3）;
varダイアログ= new Handler（App、1）;
dialog.handle = function（）{
console.log（ 'ダイアログの前...'）
//ここに特定の処理操作があります
console.log（ 'ダイアログ後...'）
};
var button = new Handler（ダイアログ、2）;
button.handle（）;
このコードの実行結果は、Dialog.Handleのプロセス結果であり、アプリに渡されたパラメーターで定義されたハンドルの実行操作ではなくなりました。
それでは、後継者のプロセスを経て、後継者にそれを処理し続けることができますか？答えはイエスですが、ハンドルを呼び出した後、プロトタイプの特性を使用して次のコードを呼び出す必要があります。
コードコピーは次のとおりです。
handler.prototype.handle.call（this）;
この文の意味は、プロトタイプハンドルメソッドを呼び出して、後継者のハンドルメソッド（つまり、後継者）を呼び出し続けることです。次のコードは次のように表されます。ボタン/ダイアログ/アプリの3つのオブジェクトによって定義されたハンドルが実行されます。
コードコピーは次のとおりです。
var app = new Handler（{
ハンドル：function（）{
console.log（ 'アプリハンドル'）;
}
}、3）;
varダイアログ= new Handler（App、1）;
dialog.handle = function（）{
console.log（ 'ダイアログの前...'）
//ここに特定の処理操作があります
handler.prototype.handle.call（this）; //上昇し続けます
console.log（ 'ダイアログ後...'）
};
var button = new Handler（ダイアログ、2）;
button.handle = function（）{
console.log（ 'ボタンの前...'）
//ここに特定の処理操作があります
handler.prototype.handle.call（this）;
console.log（ 'button after ...'）
};
button.handle（）;
コードの実行結果を通じて、最初に自分で処理してから後継者に電話して処理したい場合は、Handler.prototype.handle.call（this）を実行することがわかります。最後にコード。最初に後継者のコードを処理する場合は、Handler.prototype.handle.call（this）を実行します。最初のコード。
要約します
一連の責任は、コンビネーションパターンでよく使用されるため、コンポーネントの親コンポーネントが後継者として機能します。
同時に、DOMのイベントバブルメカニズムはこれに少し似ているようです。たとえば、ボタンをクリックした後、バブルが防止されない場合、クリックイベントは常に親要素に向かって泡立ちます。このメカニズムは、このシリーズの設計パターンの「例1：集中イベント管理」の例など、多くの関連する問題を処理するためにも使用できます。