設計模式（六）：原型模式

在讀這個模式，頭腦里就浮想兩個問題：

1. JavaScript的原型模式與普遍的原型模式有什麼區別?

2. JavaScript的原型模式與prototype有什麼關係?

原型（prototype）模式定義

原型模式（創建型設計模式）是用一個對象做模板，克隆出新對象。

另外原型模式中的克隆分為"淺克隆"和"深克隆":

淺克隆: 對值類型的成員變數進行值的複製，對引用類型的成員變數只複製引用，不複製引用的對象。

深克隆: 對值類型的成員變數進行值的複製，對引用類型的成員變數也進行引用對象的複製。

Q&A

在查閱一些資料後，對上面兩個問題有了自己答案。

1. JavaScript的原型模式與普遍的原型模式有什麼區別?

從模式定義上，是沒有區別的，模式並不跟語言相關。

2. JavaScript的原型模式與prototype有什麼關係?

函數的prototype只是在JavaScript實現原型模式的一種方式。

JavaScript實現原型模式

JavaScript使用原型模式的其中一個好處是，就是可以利用本身所具有的原型（prototype）優勢。

PS：關於JavaScript的prototype屬性不在本文做解釋。

JavaScript實現原型模式幾種方式：

1. Object.create方法

Object.create(proto, [ propertiesObject ])

proto ：一個對象，作為新創建對象的原型。

propertiesObject ：可選。該參數對象是一組屬性與值，該對象的屬性名稱將是新創建的對象的屬性名稱，值是屬性描述符（這些屬性描述符的結構與Object.defineProperties()的第二個參數一樣）。註意：該參數對象不能是 undefined，另外只有該對象中自身擁有的可枚舉的屬性才有效，也就是說該對象的原型鏈上屬性是無效的。

PS：瀏覽器相容性

例子1

var myCar = {
  name: "Ford Escort",
  drive: function () {
    console.log( "Weeee. I'm driving!" );
  },
  panic: function () {
    console.log( "Wait. How do you stop this thing?" );
  }
};
// Use Object.create to instantiate a new car
var yourCar = Object.create( myCar );
// Now we can see that one is a prototype of the other
console.log( yourCar.name );

例子2

var vehicle = {
  getModel: function () {
    console.log( "The model of this vehicle is.." + this.model );
  }
};
var car = Object.create(vehicle, {
  "id": {
    value: 'car1',
    // writable:false, configurable:false by default
    enumerable: true
  },
  "model": {
    value: "Ford",
    enumerable: true
  }
});

2. prototype屬性

主動設置prototype屬性，效果其實跟Object.create一樣。

var car = {
     id : '89757',
     much : '80000W'
}

var beget = (function(){
     function F(){}
     return function(proto){
          F.prototype = proto;
          return new F();
     }
})();
var newCar = beget(car);

總結

克隆對象有多種方式，符合JavaScript特性的是原型繼承。

另外如果通過遍歷複製方式克隆對象，算不算是原型模式，我覺得按照模式定義來講，應該算是。

參考文獻

1. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/create