怎樣用JavaScript實(shí)現(xiàn)原型模式
原型模式是指原型實(shí)例指向創(chuàng)建對(duì)象的種類,并通過(guò)拷貝這些原型創(chuàng)建新的對(duì)象,是一種用來(lái)創(chuàng)建對(duì)象的模式,也就是創(chuàng)建一個(gè)對(duì)象作為另一個(gè)對(duì)象的prototype屬性;
prototype警告:學(xué)習(xí)了解原型模式前需先學(xué)習(xí)原型、原型鏈、prototype、__proto__、constructor等知識(shí);
實(shí)現(xiàn)原型模式ES5中的API:Object.create(prototype, optionalDescriptorObjects)
Object.create()方法接收兩個(gè)參數(shù):第一個(gè)參數(shù)是__proto__對(duì)象,第二個(gè)是prototiesObject(可選,使用第二個(gè)參數(shù)可以初始化額外的其他屬性,接受字面量對(duì)象形式);
var vehiclePrototype = { model:'保時(shí)捷', getModel: function () {console.log(’車輛模具是:’ + this.model); }};var vehicle = Object.create(vehiclePrototype,{ 'model':{value:'法拉利' }});vehicle.getModel(); //車輛模具是:法拉利
我們使用Object.create實(shí)際上是新建了一個(gè)對(duì)象vehiclePrototype,并且繼承了vehiclePrototype的方法,所以此時(shí)vehicle.__proto__ == vehiclePrototype;
第二個(gè)參數(shù)中初始化了'model'的值,將model的值初始化為了'法拉利',所以此時(shí)新創(chuàng)建的對(duì)象vehiclePrototype中只有一個(gè)model,值為'法拉利';
不用Object.create()實(shí)現(xiàn),用prototype:
var vehiclePrototype = { init: function (carModel) {this.model = carModel || '保時(shí)捷'; }, 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(’法拉利’);car.getModel(); // 車輛模具是:法拉利
上述代碼中,我們可以看到核心是在vehicle中,我們先創(chuàng)建了一個(gè)新的構(gòu)造函數(shù),然后將該函數(shù)的原型指向vehiclePrototype,然后進(jìn)行實(shí)例化該函數(shù),最后繼承之后調(diào)用prototype上的init方法,最后將執(zhí)行結(jié)果進(jìn)行返回也是同樣可以實(shí)現(xiàn)的;
總結(jié)原型模式在JavaScript中無(wú)處不在,其他模式中有很多也是基于prototype來(lái)實(shí)現(xiàn)的,所以好好學(xué)習(xí)、復(fù)習(xí)原型和原型鏈的知識(shí)很重要,重點(diǎn)是prototype、__proto__、constructor等關(guān)鍵屬性知識(shí)點(diǎn);
以上就是怎樣用JavaScript實(shí)現(xiàn)原型模式的詳細(xì)內(nèi)容,更多關(guān)于JavaScript原型模式的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁(yè)制作技術(shù)經(jīng)驗(yàn)分享2. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論3. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)財(cái)務(wù)記賬管理系統(tǒng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)6. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向7. asp批量添加修改刪除操作示例代碼8. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無(wú)登錄信息的解決9. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享10. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)

網(wǎng)公網(wǎng)安備