Heim > Web-Frontend > js-Tutorial > Hauptteil

JavaScript-Entwurfsmuster Serie 4: Prototypmuster

不言
Freigeben: 2018-04-02 14:02:40
Original
1227 Leute haben es durchsucht

Dieser Artikel stellt Ihnen die vierte Reihe von JavaScript-Entwurfsmustern vor: Prototypenmodus. Interessierte Freunde können einen Blick darauf werfen

Der Code dieser Reihe wurde auf die GitHub-Adress-JavaScript-Entwurfsmuster-Demo hochgeladen

Was ist das Prototypmuster?

Prototypmuster (Prototypmuster): Laienhaft ausgedrückt bedeutet es, einen gemeinsamen Prototyp zu erstellen und durch das Kopieren dieser Prototypen neue Objekte zu erstellen. Diese Art von Entwurfsmuster wird zum Erstellen wiederholter Objekte verwendet und ist ein Erstellungsmuster, das eine gute Wahl zum Erstellen von Objekten bietet.

Implementieren des Prototyp-Modus

Wir können den Prototyp-Modus über die einzigartige Prototyp-Vererbungsfunktion von JavaScript implementieren, d. h. ein Objekt als Prototyp-Attributwert eines anderen Objekts erstellen. Wir können auch Object verwenden. Erstellen Sie (prototype, optionalDescriptorObjects), um die Prototypenvererbung zu implementieren.

// 因为不是构造函数,所以不用大写
var someCar = {
    drive: function () { },
    name: '马自达 3'
};

// 使用Object.create创建一个新车x
var anotherCar = Object.create(someCar);
anotherCar.name = '丰田佳美';
Nach dem Login kopieren

Die Methode Object.create() verwendet das angegebene Prototypobjekt und seine Eigenschaften, um ein neues Objekt zu erstellen.

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

var car = Object.create(vehicle, {
    'id': {
        value: MY_GLOBAL.nextId(),
        enumerable: true 
 },
    'model': {
        value: '福特',
        enumerable: true
    }
});
Nach dem Login kopieren

Wenn Sie das Prototypmuster selbst implementieren möchten, anstatt Object.create direkt zu verwenden. Sie können den folgenden Code verwenden, um dies zu erreichen.

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();
Nach dem Login kopieren

Zusammenfassung:

Der Prototypmodus besteht darin, einen gemeinsam genutzten Prototyp zu erstellen und durch Kopieren dieses Prototyps eine neue Klasse zu erstellen, die zum Erstellen wiederholter Objekte und zur Verbesserung der Leistung verwendet wird.

Bezogen auf das Prototypmuster von Onkel Toms Blog-Designmuster

Verwandte Empfehlungen:

JavaScript-Designmuster Serie 1: Fabrikmuster

JavaScript-Designmuster-Serie 2: Singleton-Muster

JavaScript-Designmuster-Serie 3: Builder-Muster

Das obige ist der detaillierte Inhalt vonJavaScript-Entwurfsmuster Serie 4: Prototypmuster. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage