JavaScript設計模式——原型模式

　　原型模式：

　　　　　原型模式是指原型實例指向建立對象的種類，並經過拷貝這些原型建立新的對象，是一種用來建立對象的模式，也就是建立一個對象做爲另外一個對象的prototype屬性；

　　　　　prototype警告：學習瞭解原型模式前需先學習原型、原型鏈、prototype、__proto__、constructor等知識；（http://www.javashuo.com/article/p-umuhfijn-ey.html）

　　

　　實現原型模式：

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

　　　　　　Object.create()方法接收兩個參數：第一個參數是__proto__對象，第二個是prototiesObject（可選，使用第二個參數能夠初始化額外的其餘屬性，接受字面量對象形式）；

　　　　

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；

　　第二個參數中初始化了"model"的值，將model的值初始化爲了"法拉利",因此此時新建立的對象vehiclePrototype中只有一個model，值爲"法拉利"；

　　

 

　　不用Object.create()實現，用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中，咱們先建立了一個新的構造函數，而後將該函數的原型指向vehiclePrototype，而後進行實例化該函數，最後繼承以後調用prototype上的init方法，最後將執行結果進行返回也是一樣能夠實現的；

 

　　原型模式在JavaScript中無處不在，其餘模式中有不少也是基於prototype來實現的，因此好好學習、複習原型和原型鏈的知識很重要，重點是prototype、__proto__、constructor等關鍵屬性知識點；