一、定義

　　組合模式就是用小的子物件來構建更大的物件，而這些子物件本身也許使用更小的孫物件構成的

二、舉例

　　操作資料夾

三、結構

　　組合模式包含兩種物件：葉物件和葉物件組合而成的組合物件。由組合物件和葉物件構成了樹結構，這種樹結構就是組合模式的基本結構。如下圖所示：

四、實現

　　組合模式事實上就是一個樹結構，就像前端在渲染一個類似機構樹結構，需要後端將樹結構傳到前端。雖然傳到前端的結構只是一個json格式，但事實上這個機構的每一個節點在後端都是一個節點物件，我們判斷節點是否為葉子節點往往是通過判斷其是否存在子節點。這和組合模式很相似，不同點在於，後端的節點物件一般都是同一個物件，這樣的話，這個物件可能不需要實現任何抽象類。但是組合模式中的節點需要分為兩個物件：組合物件和葉物件，這兩種物件需要實現同一個抽象類，這也就決定了二者的介面是相同的。下面以一個掃描資料夾的例子為例：

// 組合物件
var Folder = function(name){
    this.name = name;
    this.files = [];
};
Folder.prototype.add = function(file){
    this.files.push(file);
};
Folder.prototype.scan = function(){
    console.log("開始掃描資料夾:" + this.name);
    for(var i = 0, l = this.files.length; i < l; i++){
        this
 
.files[i].scan();
    }
};
// 葉物件
var File = function(name){
    this.name = name;
};
File.prototype.add = function(){
    throw new Error("檔案下不能新增檔案");
};
File.prototype.scan = function(){
    console.log("開始掃描資料夾:" + this.name);
};
var folder = new Folder("計算機");
var folder1 = new Folder("系統");
var folder2 = new
 
 Folder("學習");
var file1 = new File("system32.config");
var file2 = new File("system64.config");
var file3 = new File("react");
var file4 = new File("vue");
folder.add(folder1);
folder.add(folder2);
folder1.add(file1);
folder1.add(file2);
folder2.add(file3);
folder2.add(file4);
folder.scan();  // 呼叫掃描方法

// 開始掃描資料夾:計算機
// 開始掃描資料夾:系統
// 開始掃描資料夾:system32.config
// 開始掃描資料夾:system64.config
// 開始掃描資料夾:學習
// 開始掃描資料夾:react
// 開始掃描資料夾:vue

　　由此可以對於使用者而言，僅僅知道最頂端的組合物件，呼叫這個物件的方法，請求就會沿著樹往下傳遞，一次到達所有的節點。並且每次對最上層的物件進行一次請求的時候，實際上是對整個樹進行深度優先搜尋。