JavaScript設計模式——原型模式

  原型模式:html

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

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

  

  實現原型模式:this

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

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

    

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;code

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

  

 

  不用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方法,最後將執行結果進行返回也是一樣能夠實現的;blog

 

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

相關文章
相關標籤/搜索