深入理解JavaScript系列(42):設計模式之原型模式

來源:互聯網
上載者:User
介紹

原型模式(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的,就不多說了,這裡大家要注意的依然是淺拷貝和深拷貝的問題,免得出現引用問題。

轉自:湯姆大叔

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.