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