1. 程式人生 > >JavaScript設計模式——原型模式

JavaScript設計模式——原型模式

  原型模式:

     原型模式是指原型例項指向建立物件的種類,並通過拷貝這些原型建立新的物件,是一種用來建立物件的模式,也就是建立一個物件作為另一個物件的prototype屬性;

     prototype警告:學習瞭解原型模式前需先學習原型、原型鏈、prototype、__proto__、constructor等知識;(https://www.cnblogs.com/dengyao-blogs/p/11481326.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等關鍵屬性知識點;

 


&n