JavaScript デザインパターン シリーズ 4: プロトタイプ パターン

この記事は JavaScript デザイン パターン シリーズ 4: プロトタイプ パターンに関するものです。興味のある方はぜひご覧ください

このシリーズのコードは GitHub アドレス JavaScript デザイン パターン デモにアップロードされています

プロトタイプ パターンとは

プロトタイプpattern (プロトタイプパターン): 平たく言えば、共有プロトタイプを作成し、そのプロトタイプをコピーして新しいオブジェクトを作成することを意味します。繰り返しオブジェクトを作成するために使用されるこのタイプのデザイン パターンは、オブジェクトの作成に適した作成パターンです。

プロトタイプ パターンの実装

JavaScript の独自のプロトタイプ継承機能を使用してプロトタイプ パターンを実装できます。つまり、別のオブジェクトのプロトタイプ属性値としてオブジェクトを作成し、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 
 },
    'model': {
        value: '福特',
        enumerable: true
    }
});

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

概要:

プロトタイプ モードでは、共有プロトタイプを作成し、このプロトタイプをコピーして新しいクラスを作成します。これは、重複オブジェクトを作成してパフォーマンスを向上させるために使用されます。

Uncle Tom のブログ Design Patterns の Prototype Pattern から引用

関連する推奨事項:

JavaScript デザイン パターン シリーズ 1: Factory パターン

JavaScript デザイン パターン シリーズ 2: シングルトン パターン

JavaScript デザイン パターン シリーズ 3:ビルダーモード

以上がJavaScript デザインパターン シリーズ 4: プロトタイプ パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。