JavaScript設計模式——原型模式

原型模式:

原型模式是指原型實例指向創(chuàng)建對象的種類,并通過拷貝這些原型創(chuàng)建新的對象,是一種用來創(chuàng)建對象的模式,也就是創(chuàng)建一個對象作為另一個對象的prototype屬性;

prototype警告:學習了解原型模式前需先學習原型、原型鏈、prototype、proto、constructor等知識;(https://www.cnblogs.com/dengyao-blogs/p/11481326.html

實現(xiàn)原型模式:

ES5中的API:Object.create(prototype, optionalDescriptorObjects)

Object.create()方法接收兩個參數(shù):第一個參數(shù)是proto對象,第二個是prototiesObject(可選,使用第二個參數(shù)可以初始化額外的其他屬性,接受字面量對象形式);

var vehiclePrototype = {
    model:"保時捷",
    getModel: function () {
        console.log('車輛模具是:' + this.model);
    }
};

var vehicle = Object.create(vehiclePrototype,{
    "model":{
        value:"法拉利"
    }
});

vehicle.getModel();  //車輛模具是:法拉利

我們使用Object.create實際上是新建了一個對象vehiclePrototype,并且繼承了vehiclePrototype的方法,所以此時vehicle.proto == vehiclePrototype;

第二個參數(shù)中初始化了"model"的值,將model的值初始化為了"法拉利",所以此時新創(chuàng)建的對象vehiclePrototype中只有一個model,值為"法拉利";

不用Object.create()實現(xiàn),用prototype:

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('法拉利');
car.getModel();  // 車輛模具是:法拉利

上述代碼中,我們可以看到核心是在vehicle中,我們先創(chuàng)建了一個新的構造函數(shù),然后將該函數(shù)的原型指向vehiclePrototype,然后進行實例化該函數(shù),最后繼承之后調用prototype上的init方法,最后將執(zhí)行結果進行返回也是同樣可以實現(xiàn)的;

原型模式在JavaScript中無處不在,其他模式中有很多也是基于prototype來實現(xiàn)的,所以好好學習、復習原型和原型鏈的知識很重要,重點是prototype、proto、constructor等關鍵屬性知識點;

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發(fā)布,文章內容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內容

友情鏈接更多精彩內容