【高频考点精讲】JavaScript中的组合模式：从树形结构到组件嵌套实战

📚 目录

• 📦 什么是组合模式？
• 🌲 基础版：用组合模式构建一个简单的树形结构
• 💡 举个更真实的场景：菜单组件
• 🧠 为什么组合模式在前端特别重要？
• 🔨 实战案例：组件嵌套组合 + 权限控制
• 🧩 组合模式的延伸用法：搭建 UI DSL 引擎
• 🧪 面试题时间（欢迎评论区作答）

---

【初级】前端开发工程师面试100题（一）
【初级】前端开发工程师面试100题（二）
【初级】前端开发工程师的面试100题（速记版）

组合模式，听起来像是某种后端设计范式，但其实前端人用得比谁都多，只不过很多人一直在用，一直没意识到这就是“组合模式”。尤其在搞 React 的时候，组件嵌套那一套说白了就是组合模式的现代写法。

今天我们就从最经典的树形结构聊起，一步一步拆开，讲到前端中真实可落地的使用场景，代码直接跑得起来，结构清晰，逻辑在线，不玩虚的。

本文由全栈老李原创首发，转载请注明出处。

📦 什么是组合模式？

组合模式（Composite Pattern）属于经典的结构型设计模式，它的精髓就是把单个对象和对象集合统一处理。

举个特别通俗的例子：你可以把“一个文件”和“一个文件夹”都当成“文件系统节点”，因为它们有相似的操作，比如“打开”“删除”“重命名”。文件夹里可以有文件、也可以有文件夹。这种树状结构，组合模式就很合适。

在 JavaScript 里，这种结构特别适合用来做：

• 页面组件的递归渲染（React 中尤为常见）
• 组织层级菜单
• 组织评论嵌套结构
• 搭建虚拟 DOM 结构
• 构建语法树（AST）
• 游戏中的对象管理树（比如精灵图）

🌲 基础版：用组合模式构建一个简单的树形结构

先看一个纯粹的组合模式实现，不带任何框架，就是 JS 面向对象本体。

// 全栈老李出品，面试高频组合模式示例// 抽象组件（父类）
class Component {constructor(name) {this.name = name;}add(component) {throw new Error('子类需要实现 add 方法');}remove(component) {throw new Error('子类需要实现 remove 方法');}display(depth = 0