摘要:你可以使用像下面這樣的代碼為上面的例子來實(shí)現(xiàn)車輛模具是福特總結(jié)原型模式在里的使用簡直是無處不在,其它很多模式有很多也是基于的,這里大家要注意的依然是淺拷貝和深拷貝的問題,免得出現(xiàn)引用問題。
1. 簡介
原型模式(Prototype pattern),用原型實(shí)例指向創(chuàng)建對象的類,使用于創(chuàng)建新的對象的類的共享原型的屬性與方法。
2. 實(shí)現(xiàn)對于原型模式,我們可以利用JavaScript特有的原型繼承特性去創(chuàng)建對象的方式,也就是創(chuàng)建的一個(gè)對象作為另外一個(gè)對象的prototype屬性值。原型對象本身就是有效地利用了每個(gè)構(gòu)造器創(chuàng)建的對象,例如,如果一個(gè)構(gòu)造函數(shù)的原型包含了一個(gè)name屬性(見后面的例子),那通過這個(gè)構(gòu)造函數(shù)創(chuàng)建的對象都會(huì)有這個(gè)屬性。
在現(xiàn)有的文獻(xiàn)里查看原型模式的定義,沒有針對JavaScript的,你可能發(fā)現(xiàn)很多講解的都是關(guān)于類的,但是現(xiàn)實(shí)情況是基于原型繼承的JavaScript完全避免了類(class)的概念。我們只是簡單從現(xiàn)有的對象進(jìn)行拷貝來創(chuàng)建對象。
真正的原型繼承是作為最新版的ECMAScript5標(biāo)準(zhǔn)提出的,使用Object.create方法來創(chuàng)建這樣的對象,該方法創(chuàng)建指定的對象,其對象的prototype有指定的對象(也就是該方法傳進(jìn)的第一個(gè)參數(shù)對象),也可以包含其他可選的指定屬性。例如Object.create(prototype, optionalDescriptorObjects),下面的例子里也可以看到這個(gè)用法:
// 因?yàn)椴皇菢?gòu)造函數(shù),所以不用大寫 var someCar = { drive: function () { }, name: "馬自達(dá) 3" }; // 使用Object.create創(chuàng)建一個(gè)新車x var anotherCar = Object.create(someCar); anotherCar.name = "豐田佳美";
Object.create運(yùn)行你直接從其它對象繼承過來,使用該方法的第二個(gè)參數(shù),你可以初始化額外的其它屬性。例如:
var vehicle = { getModel: function () { console.log("車輛的模具是:" + this.model); } }; var car = Object.create(vehicle, { "id": { value: MY_GLOBAL.nextId(), enumerable: true // 默認(rèn)writable:false, configurable:false }, "model": { value: "福特", enumerable: true } });
這里,可以在Object.create的第二個(gè)參數(shù)里使用對象字面量傳入要初始化的額外屬性,其語法與Object.defineProperties或Object.defineProperty方法類似。它允許您設(shè)定屬性的特性,例如enumerable, writable 或 configurable。
如果你希望自己去實(shí)現(xiàn)原型模式,而不直接使用Object.create 。你可以使用像下面這樣的代碼為上面的例子來實(shí)現(xiàn):
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();3. 總結(jié)
原型模式在JavaScript里的使用簡直是無處不在,其它很多模式有很多也是基于prototype的,這里大家要注意的依然是淺拷貝和深拷貝的問題,免得出現(xiàn)引用問題。
原型模式適合在創(chuàng)建復(fù)雜對象時(shí),對于那些需求一直在變化而導(dǎo)致對象結(jié)構(gòu)不停地改變時(shí),將那些比較穩(wěn)定的屬性與方法共用而提取的繼承的實(shí)現(xiàn)。
本文是系列文章,可以相互參考印證,共同進(jìn)步~
JS 抽象工廠模式
JS 工廠模式
JS 建造者模式
JS 原型模式
JS 單例模式
JS 回調(diào)模式
JS 外觀模式
JS 適配器模式
JS 利用高階函數(shù)實(shí)現(xiàn)函數(shù)緩存(備忘模式)
JS 狀態(tài)模式
JS 橋接模式
JS 觀察者模式
網(wǎng)上的帖子大多深淺不一,甚至有些前后矛盾,在下的文章都是學(xué)習(xí)過程中的總結(jié),如果發(fā)現(xiàn)錯(cuò)誤,歡迎留言指出~
參考:
設(shè)計(jì)模式之原型模式
《Javascript 設(shè)計(jì)模式》 - 張榮銘
PS:歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】,一起加油吧~
另外可以加入「前端下午茶交流群」微信群,長按識(shí)別下面二維碼即可加我好友,備注加群,我拉你入群~
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://m.hztianpu.com/yun/92124.html
摘要:在基于原型的面向?qū)ο蠓绞街?,對象則是依靠構(gòu)造函數(shù)和原型構(gòu)造出來的。來看下面的例子優(yōu)點(diǎn)與單純使用構(gòu)造函數(shù)不一樣,原型對象中的方法不會(huì)在實(shí)例中重新創(chuàng)建一次,節(jié)約內(nèi)存。 我們所熟知的面向?qū)ο笳Z言如 C++、Java 都有類的的概念,類是實(shí)例的類型模板,比如Student表示學(xué)生這種類型,而不表示任何具體的某個(gè)學(xué)生,而實(shí)例就是根據(jù)這個(gè)類型創(chuàng)建的一個(gè)具體的對象,比如zhangsan、lisi,由...
摘要:于是就有了構(gòu)造函數(shù)和原型模式混合模式組合使用構(gòu)造函數(shù)模式和原型模式創(chuàng)建自定義類型最常見的方式,就是組合模式。 創(chuàng)建對象 JS有六種數(shù)據(jù)數(shù)據(jù)類型,其中五種屬于基本數(shù)據(jù)類型:Null、Boolean、undefined、String、Number。而其它值都是對象。數(shù)組是對象,函數(shù)是對象,正則表達(dá)式是對象。對象也是對象。 來看一下對象的定義: 無序?qū)傩缘募?,其屬性可以包含基本值、對象、?..
摘要:組合模式繼承結(jié)合了構(gòu)造函數(shù)繼承時(shí)可以為每個(gè)屬性重新初始化,構(gòu)造一個(gè)副本的優(yōu)點(diǎn),以及原型鏈繼承時(shí)一次定義處處共享的優(yōu)點(diǎn)。但令我百思不得其解的是,從上面給出的例子來看,組合繼承并沒有調(diào)用兩次超類型構(gòu)造函數(shù)。 最近在閱讀《js權(quán)威指南》的繼承這一章,對于組合模式和寄生組合模式的區(qū)別有點(diǎn)混淆,在多次重讀以及嘗試之后,得到一些心得。 組合模式繼承 結(jié)合了構(gòu)造函數(shù)繼承時(shí)可以為每個(gè)屬性重新初始化,構(gòu)...
摘要:對象會(huì)記住它的原型給對象提供了一個(gè)名為的隱藏屬性,某個(gè)對象的屬性默認(rèn)會(huì)指向它的構(gòu)造器的原型對象,即。我們通過代碼來驗(yàn)證再來實(shí)際上,就是對象跟對象構(gòu)造器的原型聯(lián)系起來的紐帶切記這句話,對未來理解原型鏈很有幫助。 封裝 封裝數(shù)據(jù) 在許多語言的對象系統(tǒng)中,封裝數(shù)據(jù)是由語法解析來實(shí)現(xiàn)的,這些語言也許提供了 private、public、protected 等關(guān)鍵字來提供不同的訪問權(quán)限。例如:j...
摘要:對象經(jīng)典對象創(chuàng)建與繼承模式組合模式創(chuàng)建對象中創(chuàng)建一個(gè)對象的方式多種多樣,每種方式都有自己缺點(diǎn)或者優(yōu)點(diǎn),具體的可以參考而組合使用構(gòu)造函數(shù)模式和原型模式來創(chuàng)建自定義類型算是最常見的方式了。 title: JS對象(3)經(jīng)典對象創(chuàng)建與繼承模式 date: 2016-09-28 tags: JavaScript 0x01 組合模式創(chuàng)建對象 JS 中創(chuàng)建一個(gè)對象的方式多種多樣,...
閱讀 3571·2021-11-12 10:36
閱讀 2971·2021-09-22 15:35
閱讀 2894·2021-09-04 16:41
閱讀 1250·2019-08-30 15:55
閱讀 3653·2019-08-29 18:43
閱讀 2140·2019-08-23 18:24
閱讀 1482·2019-08-23 18:10
閱讀 1979·2019-08-23 11:31