JS 原型模式

時間 2019-11-06

原文原文鏈接

1. 簡介

原型模式(Prototype pattern)，用原型實例指向建立對象的類，使用於建立新的對象的類的共享原型的屬性與方法。html

2. 實現

對於原型模式，咱們能夠利用JavaScript特有的原型繼承特性去建立對象的方式，也就是建立的一個對象做爲另一個對象的prototype屬性值。原型對象自己就是有效地利用了每一個構造器建立的對象，例如，若是一個構造函數的原型包含了一個name屬性（見後面的例子），那經過這個構造函數建立的對象都會有這個屬性。前端

在現有的文獻裏查看原型模式的定義，沒有針對JavaScript的，你可能發現不少講解的都是關於類的，可是現實狀況是基於原型繼承的JavaScript徹底避免了類（class）的概念。咱們只是簡單從現有的對象進行拷貝來建立對象。segmentfault

真正的原型繼承是做爲最新版的ECMAScript5標準提出的，使用Object.create方法來建立這樣的對象，該方法建立指定的對象，其對象的prototype有指定的對象（也就是該方法傳進的第一個參數對象），也能夠包含其餘可選的指定屬性。例如Object.create(prototype, optionalDescriptorObjects)，下面的例子裏也能夠看到這個用法：設計模式

// 由於不是構造函數，因此不用大寫
var someCar = {
    drive: function () { },
    name: '馬自達 3'
};

// 使用Object.create建立一個新車x
var anotherCar = Object.create(someCar);
anotherCar.name = '豐田佳美';

Object.create運行你直接從其它對象繼承過來，使用該方法的第二個參數，你能夠初始化額外的其它屬性。例如：緩存

var vehicle = {
    getModel: function () {
        console.log('車輛的模具是：' + this.model);
    }
};

var car = Object.create(vehicle, {
    'id': {
        value: MY_GLOBAL.nextId(),
        enumerable: true // 默認writable:false, configurable:false
},
    'model': {
        value: '福特',
        enumerable: true
    }
});

這裏，能夠在Object.create的第二個參數裏使用對象字面量傳入要初始化的額外屬性，其語法與Object.defineProperties或Object.defineProperty方法相似。它容許您設定屬性的特性，例如enumerable, writable 或 configurable。微信

若是你但願本身去實現原型模式，而不直接使用Object.create 。你可使用像下面這樣的代碼爲上面的例子來實現：函數

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('福特Escort');
car.getModel();