JS设计模式 — 行为委托

回顾一下原型,发现\[Prototype]机制就是指对象中的一个内部链接引用另一个对象,这个机制的本质就是对象之间的关联关系

1、面相委托的设计

js 复制代码
Task = {
	setID: function(ID) { this.id = ID; },
	outputID: function() { console.log( this.id ); }
};
// 让 XYZ 委托 Task
XYZ = Object.create( Task );
XYZ.prepareTask = function(ID,Label) {
	this.setID( ID );
	this.label = Label;
};
XYZ.outputTaskDetails = function() {
	this.outputID();
	console.log( this.label );
};
// ABC = Object.create( Task );
// ABC ... = ...

我们把这种编码风格称为"对象关联",在JS中\[Prototype]机制会把对象关联到其他对象,对象关联的代码会有一些不同之处:

  1. 在上面的代码中,id 和 label 数据成员都是直接存储在 XYZ 上(而不是 Task)。通常来说,在 \[Prototype] 委托中最好把状态保存在委托者(XYZ、ABC)而不是委托目标(Task)上。

  2. 在类设计模式中,我们故意让父类(Task)和子类(XYZ)中都有 outputTask 方法,这

    样就可以利用重写(多态)的优势。在委托行为中则恰好相反:我们会尽量避免在\[Prototype] 链的不同级别中使用相同的命名,否则就需要使用笨拙并且脆弱的语法来消除引用歧义(参见第 4 章)。

    这个设计模式要求尽量少使用容易被重写的通用方法名,提倡使用更有描述性的方法名,尤其是要写清相应对象行为的类型。这样做实际上可以创建出更容易理解和维护的代码,因为方法名(不仅在定义的位置,而是贯穿整个代码)更加清晰(自文档)。

  3. this.setID(ID);XYZ 中的方法首先会寻找 XYZ 自身是否有 setID(...),但是 XYZ 中并没有这个方法名,因此会通过 \[Prototype] 委托关联到 Task 继续寻找,这时就可以找到setID(...) 方法。此外,由于调用位置触发了 this 的隐式绑定规则(参见第 2 章),因此虽然 setID(...) 方法在 Task 中,运行时 this 仍然会绑定到 XYZ,这正是我们想要的。在之后的代码中我们还会看到 this.outputID(),原理相同。

    换句话说,我们和 XYZ 进行交互时可以使用 Task 中的通用方法,因为 XYZ 委托了 Task。

委托行为意味着某些对象(XYZ)在找不到属性或者方法引用时会把这个请求委托给另一个对象(Task)。这是一种极其强大的设计模式,和父类、子类、继承、多态等概念完全不同

2、总结

在软件架构中你可以选择是否使用类和继承设计模式。大多数开发者理所当然地认为类是唯一(合适)的代码组织方式,但是本章中我们看到了另一种更少见但是更强大的设计模式:行为委托。

行为委托认为对象之间是兄弟关系,互相委托,而不是父类和子类的关系。JavaScript 的\[Prototype] 机制本质上就是行为委托机制。也就是说,我们可以选择在 JavaScript 中努力实现类机制,也可以拥抱更自然的 \[Prototype] 委托机制。

当你只用对象来设计代码时,不仅可以让语法更加简洁,而且可以让代码结构更加清晰。

对象关联(对象之前互相关联)是一种编码风格,它倡导的是直接创建和关联对象,不把它们抽象成类。对象关联可以用基于 \[Prototype] 的行为委托非常自然地实现。

相关推荐
————A20 分钟前
Agent 文件处理中间件
开发语言·javascript·ecmascript
ITresearchGuest39 分钟前
LangChain JS 入门:快速搭建前端 AI 开发环境
前端·javascript·langchain
小磊哥er1 小时前
深入解构Claude Code - 第 1 篇 · 先认识它
javascript·ai编程
雪芽蓝域zzs1 小时前
第十节:动态侧边栏菜单(根据路由 meta 自动渲染菜单)
javascript·vue.js·elementui
ttwuai2 小时前
Go 后台管理系统组件库文档怎么写,才不会坑后续维护?
开发语言·javascript·golang
光影少年2 小时前
react navite调试方案:Flipper、远程调试
前端·javascript·react native·react.js·前端框架
海兰2 小时前
【应用】基于 Next.js 16 + Python mplfinance的金融K线图与技术指标可视化平台(二)
javascript·python·金融
雪芽蓝域zzs2 小时前
第五节:Vue‑Router4 路由配置,布局嵌套路由
前端·javascript·vue.js
雪芽蓝域zzs3 小时前
第十二节:完整用户管理 CRUD 页面(表格分页、新增 / 编辑弹窗、删除、Mock 接口)
前端·javascript·vue.js
YHHLAI3 小时前
[特殊字符] 从 JSX 到 TypeScript:React 开发的进化之路
javascript·react.js·typescript