JavaScript 责任链模式实战：以图书折扣计算为例
本文深入解析JavaScript中的责任链设计模式，通过一个图书商城五一促销活动的具体案例，演示如何构建处理者链条。文章详细阐述了抽象处理者与具体处理者的角色定义，并提供了基于ES6前语法的完整代码实现，展示如何利用该模式解耦请求发送者与接收者，实现动态的折扣计算逻辑。
本文通过具体实例详细解析JavaScript中的责任链设计模式，旨在为读者提供清晰的参考与学习素材。
责任链模式概念与角色
责任链设计模式的核心概念：
在责任链模式中，多个对象通过持有对下一个对象的引用来形成一条链。请求沿着这条链进行传递，直到链上的某个对象决定处理该请求。发出请求的客户端无需知晓链中具体由哪个对象最终处理，这使得系统能够在不影响客户端代码的前提下，动态地重新组织或分配处理责任。
责任链模式主要包含以下角色：
● 抽象处理者（Handler）角色：定义处理请求的接口。该接口通常包含设定和返回下家引用的方法，用于建立链式结构。在Java等语言中，这通常由抽象类或接口实现。图中Handler类的聚合关系展示了具体子类如何引用下家，而handleRequest()抽象方法则规范了子类处理请求的具体操作。
● 具体处理者（ConcreteHandler）角色：当具体处理者接收到请求后，可以选择自行处理该请求，或者将其传递给下家。由于具体处理者持有所谓下家的引用，因此在需要时它可以访问并调用下家的处理方法。
在JavaScript（ES6之前）中，严格意义上并不存在类似Java的extends继承机制，因此以下代码未模拟抽象类，仅实现了具体的处理类逻辑。
JavaScript中的责任链实现
应用场景示例：某购物商城在五一期间开展促销活动，针对图书类商品，根据购买金额的不同区间执行相应的折扣方案。
1、购买满199元，享受9折优惠 2、购买满399元，享受8折优惠 3、购买满599元以上，享受7折优惠；
责任链模式的主要优势：
请求发送者只需知晓链中的第一个节点，从而弱化了发送者与一组接收者之间的强耦合关系。若不使用责任链模式，客户端需根据当前价格逐一判断每一级的打折信息，最终确定符合当前价格的折扣层级；而使用责任链后，这一过程由链内部自动完成。
function BookHandler() {
this.calcPrice = function( price ) {
if ( 199 > price ) {
console.log("原价是："+ price);
} else {
this.successor.calcPrice( price );
}
}
this.setSuccessor = function( _successor ) {
this.successor = _successor;
}
}
function BookCalc9Handler( _successor ) {
this.calcPrice = function( price ) {
if ( 199 <= price && price < 399 ) {
console.log("原价是："+ price +";打9折后：" + (price * 0.9));
} else {
this.successor.calcPrice( price );
}
}
this.setSuccessor = function( _successor ) {
this.successor = _successor;
}
}
function BookCalc8Handler() {
this.calcPrice = function( price ) {
if ( 399 <= price && price < 599 ) {
console.log("原价是："+ price +";打8折后：" + (price * 0.8));
} else {
this.successor.calcPrice( price )
}
}
this.setSuccessor = function( _successor ) {
this.successor = _successor;
}
}
function BookCalc7Handler() {
this.calcPrice = function( price ) {
if ( price >= 599 ) {
console.log("原价是："+ price +";打7折后：" + (price * 0.7));
} else {
this.successor.calcPrice( price )
}
}
this.setSuccessor = function( _successor ) {
this.successor = _successor;
}
}
客户端调用示例：
var price = 400;
var bookHandler = new BookHandler();
var bookCalc9Handler = new BookCalc9Handler();
var bookCalc8Handler = new BookCalc8Handler();
var bookCalc7Handler = new BookCalc7Handler();
bookHandler.setSuccessor(bookCalc9Handler);
bookCalc9Handler.setSuccessor(bookCalc8Handler);
bookCalc8Handler.setSuccessor(bookCalc7Handler);
bookHandler.calcPrice(price);
Console.log打印输出的效果如下：
更多关于JavaScript技术内容，可参考本站相关专题：《javascript面向对象入门教程》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》。
希望本文所述的JavaScript程序设计技巧能对读者有所帮助。
JS中将数组和对象混合组装为JSON字符串
2026-11-05 16:41:42
JS运算符优先级与结合性的区别是什么？
2026-11-05 13:22:02
JS Map怎么只遍历Key或Value
2026-11-05 13:00:36
D3.js 与 ECharts 选型对比：灵活性 vs 开发效率
2026-11-05 09:45:01
为什么JS中typeof []返回object：数组类型检测误区解析
2026-11-04 19:50:47