介绍
组合模式（Composite）将对象组合成树形结构以表示“部分-整体”的层次结构，组合模式使得用户对单个对象和组合对象的使用具有一致性。
常见的场景有asp.net里的控件机制（即control里可以包含子control，可以递归操作、添加、删除子control），类似的还有DOM的机制，一个DOM节点可以包含子节点，不管是父节点还是子节点都有添加、删除、遍历子节点的通用功能。所以说组合模式的关键是要有一个抽象类，它既可以表示子元素，又可以表示父元素。
正文
举个例子，有家餐厅提供了各种各样的菜品，每个餐桌都有一本菜单，菜单上列出了该餐厅所偶的菜品，有早餐糕点、午餐、晚餐等等，每个餐都有各种各样的菜单项，假设不管是菜单项还是整个菜单都应该是可以打印的，而且可以添加子项，比如午餐可以添加新菜品，而菜单项咖啡也可以添加糖啊什么的。
这种情况，我们就可以利用组合的方式将这些内容表示为层次结构了。我们来逐一分解一下我们的实现步骤。
第一步，先实现我们的“抽象类”函数MenuComponent：
第二步，创建基本的菜品项：
由代码可以看出，我们只重新了原型的4个获取信息的方法和print方法，没有重载其它3个操作方法，因为基本菜品不包含添加、删除、获取子菜品的方式。
第三步，创建菜品：
for (; nMenuItem < nLenMenuItems; ) { oItem = this.aMenuComponents[nMenuItem]; if (oItem !== oMenuComponent) { aMenuItems.push(oItem); } nMenuItem = nMenuItem + 1; } this.aMenuComponents = aMenuItems; }; Menu.prototype.getChild = function (nIndex) { //获取指定的子菜品 return this.aMenuComponents[nIndex]; }; Menu.prototype.getName = function () { return this.sName; }; Menu.prototype.getDescription = function () { return this.sDescription; }; Menu.prototype.print = function () { // 打印当前菜品以及所有的子菜品 console.log(this.getName() + ": " + this.getDescription()); console.log("--------------------------------------------");
var nMenuComponent = 0; var nLenMenuComponents = this.aMenuComponents.length; var oMenuComponent = null;
for (; nMenuComponent < nLenMenuComponents; ) { oMenuComponent = this.aMenuComponents[nMenuComponent]; oMenuComponent.print(); nMenuComponent = nMenuComponent + 1; } };
第四步，创建指定的菜品：
我们可以创建几个真实的菜品，比如晚餐、咖啡、糕点等等，其都是用Menu作为其原型，代码如下：
var CafeMenu = function () { Menu.apply(this); }; CafeMenu.prototype = new Menu();
var PancakeHouseMenu = function () { Menu.apply(this); }; PancakeHouseMenu.prototype = new Menu();
第六步，调用方式：
oAllMenus.add(oPanCakeHouseMenu); oAllMenus.add(oDinnerMenu);
oDinnerMenu.add(new MenuItem("Pasta","Spaghetti with Marinara Sauce,and a slice of sourdough bread",true,3.89)); oDinnerMenu.add(oCoffeeMenu);
oCoffeeMenu.add(new MenuItem("Express","Coffee from machine",false,0.99));
var oMattress = new Mattress(oAllMenus); console.log("---------------------------------------------"); oMattress.printMenu(); console.log("---------------------------------------------");
总结
组合模式的使用场景非常明确：
你想表示对象的部分-整体层次结构时； 你希望用户忽略组合对象和单个对象的不同，用户将统一地使用组合结构中的所有对象（方法） 另外该模式经常和装饰者一起使用，它们通常有一个公共的父类（也就是原型），因此装饰必须支持具有add、remove、getChild操作的 component接口。
原文链接：https://www.f2er.com/js/55463.html