前端設計模式——原型模式

原型模式（Prototype Pattern）：使用原型實例指定創建對象的種類，並通過拷貝這些原型創建新的對象。

在JavaScript中，所有的對象都有一個原型鏈。原型鏈是一種機制，它允許我們在對象上定義屬性和方法，並且可以從它的原型中繼承屬性和方法。當我們訪問一個對象的屬性或方法時，JavaScript會在原對象上查找，如果找不到，它會繼續查找原型鏈上的對象，直到找到該屬性或方法或者到達原型鏈的末端。

原型模式是一種利用原型鏈的設計模式，它允許我們通過克隆現有對象來創建新對象。JavaScript中的原型模式使用`Object.create()`方法來創建一個對象，並且可以通過修改原型鏈上的屬性和方法來修改新對象的行為。

使用原型模式的主要優點是它可以減少對象創建的時間和成本。它避免了在創建對象時需要執行許多計算或調用其他對象的構造函數的開銷。相反，它使用現有對象作為基礎，並通過克隆來創建新對象，從而提高了性能和效率。

下麵是一個使用原型模式創建表單對象的示例代碼：

// 定義一個表單對象的原型
var formPrototype = {
  fields: [],
  addField: function(field) {
    this.fields.push(field);
  },
  getFields: function() {
    return this.fields;
  },
  clone: function() {
    // 克隆表單對象並返回新對象
    var newForm = Object.create(this);
    newForm.fields = Object.create(this.fields);
    return newForm;
  }
};

// 創建一個表單對象
var form = Object.create(formPrototype);

// 添加表單欄位
form.addField('name');
form.addField('email');
form.addField('phone');

// 克隆表單對象並修改其中的欄位
var newForm = form.clone();
newForm.addField('address');

// 列印表單對象和新表單對象的欄位
console.log(form.getFields()); // ["name", "email", "phone"]
console.log(newForm.getFields()); // ["name", "email", "phone", "address"]

在這個示例中，我們首先定義了一個表單對象的原型，它包含一個空的欄位數組、添加欄位和獲取欄位的方法以及一個克隆方法。然後，我們創建了一個表單對象，並向其添加了三個欄位。接下來，我們使用原型模式克隆表單對象並添加一個新欄位。最後，我們列印了表單對象和新表單對象的欄位，以驗證克隆方法是否正常工作。