## 介紹
原型模式(prototype)是指用原型實例指向創建對象的種類,并且通過拷貝這些原型創建新的對象。
## 正文
對于原型模式,我們可以利用JavaScript特有的原型繼承特性去創建對象的方式,也就是創建的一個對象作為另外一個對象的prototype屬性值。原型對象本身就是有效地利用了每個構造器創建的對象,例如,如果一個構造函數的原型包含了一個name屬性(見后面的例子),那通過這個構造函數創建的對象都會有這個屬性。
在現有的文獻里查看原型模式的定義,沒有針對JavaScript的,你可能發現很多講解的都是關于類的,但是現實情況是基于原型繼承的JavaScript完全避免了類(class)的概念。我們只是簡單從現有的對象進行拷貝來創建對象。
真正的原型繼承是作為最新版的ECMAScript5標準提出的,使用Object.create方法來創建這樣的對象,該方法創建指定的對象,其對象的prototype有指定的對象(也就是該方法傳進的第一個參數對象),也可以包含其他可選的指定屬性。例如Object.create(prototype, optionalDescriptorObjects),下面的例子里也可以看到這個用法:
~~~
// 因為不是構造函數,所以不用大寫
var someCar = {
drive: function () { },
name: '馬自達 3'
};
// 使用Object.create創建一個新車x
var anotherCar = Object.create(someCar);
anotherCar.name = '豐田佳美';
~~~
Object.create運行你直接從其它對象繼承過來,使用該方法的第二個參數,你可以初始化額外的其它屬性。例如:
~~~
var vehicle = {
getModel: function () {
console.log('車輛的模具是:' + this.model);
}
};
var car = Object.create(vehicle, {
'id': {
value: MY_GLOBAL.nextId(),
enumerable: true // 默認writable:false, configurable:false
},
'model': {
value: '福特',
enumerable: true
}
});
~~~
這里,可以在Object.create的第二個參數里使用對象字面量傳入要初始化的額外屬性,其語法與Object.defineProperties或Object.defineProperty方法類型。它允許您設定屬性的特性,例如enumerable, writable 或 configurable。
如果你希望自己去實現原型模式,而不直接使用Object.create 。你可以使用像下面這樣的代碼為上面的例子來實現:
~~~
var vehiclePrototype = {
init: function (carModel) {
this.model = carModel;
},
getModel: function () {
console.log('車輛模具是:' + this.model);
}
};
function vehicle(model) {
function F() { };
F.prototype = vehiclePrototype;
var f = new F();
f.init(model);
return f;
}
var car = vehicle('福特Escort');
car.getModel();
~~~
## 總結
原型模式在JavaScript里的使用簡直是無處不在,其它很多模式有很多也是基于prototype的,就不多說了,這里大家要注意的依然是淺拷貝和深拷貝的問題,免得出現引用問題。
- (1)編寫高質量JavaScript代碼的基本要點
- (2)揭秘命名函數表達式
- (3)全面解析Module模式
- (4)立即調用的函數表達式
- (5)強大的原型和原型鏈
- (6)S.O.L.I.D五大原則之單一職責SRP
- (7)S.O.L.I.D五大原則之開閉原則OCP
- (8)S.O.L.I.D五大原則之里氏替換原則LSP
- (9)根本沒有“JSON對象”這回事!
- (10)JavaScript核心(晉級高手必讀篇)
- (11)執行上下文(Execution Contexts)
- (12)變量對象(Variable Object)
- (13)This? Yes, this!
- (14)作用域鏈(Scope Chain)
- (15)函數(Functions)
- (16)閉包(Closures)
- (17)面向對象編程之一般理論
- (18)面向對象編程之ECMAScript實現
- (19)求值策略
- (20)《你真懂JavaScript嗎?》答案詳解
- (21)S.O.L.I.D五大原則之接口隔離原則ISP
- (22)S.O.L.I.D五大原則之依賴倒置原則DIP
- (23)JavaScript與DOM(上)——也適用于新手
- (24)JavaScript與DOM(下)
- (25)設計模式之單例模式
- (26)設計模式之構造函數模式
- (27)設計模式之建造者模式
- (28)設計模式之工廠模式
- (29)設計模式之裝飾者模式
- (30)設計模式之外觀模式
- (31)設計模式之代理模式
- (32)設計模式之觀察者模式
- (33)設計模式之策略模式
- (34)設計模式之命令模式
- (35)設計模式之迭代器模式
- (36)設計模式之中介者模式
- (37)設計模式之享元模式
- (38)設計模式之職責鏈模式
- (39)設計模式之適配器模式
- (40)設計模式之組合模式
- (41)設計模式之模板方法
- (42)設計模式之原型模式
- (43)設計模式之狀態模式
- (44)設計模式之橋接模式
- (45)代碼復用模式(避免篇)
- (46)代碼復用模式(推薦篇)
- (47)對象創建模式(上篇)
- (48)對象創建模式(下篇)
- (49)Function模式(上篇)
- (50)Function模式(下篇)
- (結局篇)