JavaScript 設(shè)計(jì)模式之原型模式

2018-07-28 17:55 更新

介紹

原型模式（prototype）是指用原型實(shí)例指向創(chuàng)建對(duì)象的種類，并且通過拷貝這些原型創(chuàng)建新的對(duì)象。

正文

對(duì)于原型模式，我們可以利用JavaScript特有的原型繼承特性去創(chuàng)建對(duì)象的方式，也就是創(chuàng)建的一個(gè)對(duì)象作為另外一個(gè)對(duì)象的prototype屬性值。原型對(duì)象本身就是有效地利用了每個(gè)構(gòu)造器創(chuàng)建的對(duì)象，例如，如果一個(gè)構(gòu)造函數(shù)的原型包含了一個(gè)name屬性（見后面的例子），那通過這個(gè)構(gòu)造函數(shù)創(chuàng)建的對(duì)象都會(huì)有這個(gè)屬性。

在現(xiàn)有的文獻(xiàn)里查看原型模式的定義，沒有針對(duì)JavaScript的，你可能發(fā)現(xiàn)很多講解的都是關(guān)于類的，但是現(xiàn)實(shí)情況是基于原型繼承的JavaScript完全避免了類（class）的概念。我們只是簡(jiǎn)單從現(xiàn)有的對(duì)象進(jìn)行拷貝來創(chuàng)建對(duì)象。

真正的原型繼承是作為最新版的ECMAScript5標(biāo)準(zhǔn)提出的，使用Object.create方法來創(chuàng)建這樣的對(duì)象，該方法創(chuàng)建指定的對(duì)象，其對(duì)象的prototype有指定的對(duì)象（也就是該方法傳進(jìn)的第一個(gè)參數(shù)對(duì)象），也可以包含其他可選的指定屬性。例如Object.create(prototype, optionalDescriptorObjects)，下面的例子里也可以看到這個(gè)用法：

// 因?yàn)椴皇菢?gòu)造函數(shù)，所以不用大寫
var someCar = {
    drive: function () { },
    name: '馬自達(dá) 3'
};

// 使用Object.create創(chuàng)建一個(gè)新車x
var anotherCar = Object.create(someCar);
anotherCar.name = '豐田佳美';

Object.create運(yùn)行你直接從其它對(duì)象繼承過來，使用該方法的第二個(gè)參數(shù)，你可以初始化額外的其它屬性。例如：

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

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

這里，可以在Object.create的第二個(gè)參數(shù)里使用對(duì)象字面量傳入要初始化的額外屬性，其語(yǔ)法與Object.defineProperties或Object.defineProperty方法類型。它允許您設(shè)定屬性的特性，例如enumerable, writable 或 configurable。

如果你希望自己去實(shí)現(xiàn)原型模式，而不直接使用Object.create 。你可以使用像下面這樣的代碼為上面的例子來實(shí)現(xiàn)：

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();

總結(jié)

原型模式在JavaScript里的使用簡(jiǎn)直是無處不在，其它很多模式有很多也是基于prototype的，就不多說了，這里大家要注意的依然是淺拷貝和深拷貝的問題，免得出現(xiàn)引用問題。


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)