Beispielanalyse eines JavaScript-Konstruktormusters

In diesem Artikel wird hauptsächlich das Konstruktormuster des JavaScript-Programmierentwurfs vorgestellt. Er beschreibt kurz das Konzept und das Prinzip des Konstruktormusters und analysiert die Definition und Verwendung des Konstruktormusters anhand von Beispielen Ich hoffe, es kann allen helfen.

Dieser Artikel beschreibt das Konstruktormuster des JavaScript-Programmierentwurfsmusters anhand von Beispielen. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

In der klassischen OOP-Sprache ist der Konstruktor (auch Konstruktor genannt) eine spezielle Methode, die zum Initialisieren von Objekten verwendet wird. Da in JS alles ein Objekt ist, werden Objektkonstruktoren häufig erwähnt.

Der Objektkonstruktor wird zum Erstellen eines Objekts eines bestimmten Typs (Klasse) verwendet und kann Parameter akzeptieren, um die Eigenschaften und Methoden des Objekts zu initialisieren.

Objekterstellung

In JS gibt es drei häufig verwendete Methoden zum Erstellen von Objekten:

//1, 推荐使用
var newObject = {};
//2,
var newObject = Object.create( null );
//3, 不推荐
var newObject = new Object();

Dadurch werden jedoch nur drei leere Objekte ohne Eigenschaften und Methoden erstellt. Mit den folgenden vier Methoden können wir Eigenschaften und Methoden für Objekte festlegen.

// ECMAScript 3 兼容的方式
// 1. 常规对象定义方式
//设置属性
newObject.someKey = "Hello World";
//获取属性
var key = newObject.someKey;
// 2. 方括号方式
// 设置属性
newObject["someKey"] = "Hello World";
//获取属性
var key = newObject["someKey"];
// 仅仅用于ECMAScript 5
// 3. Object.defineProperty
// 设置属性
Object.defineProperty(
 newObject, "someKey",
 { value: "for more control of the property's behavior",
  writable: true,
  enumerable: true,
  configurable: true
});
//可以通过下面的函数简化属性设置
var defineProp = function ( obj, key, value ){
  config.value = value;
  Object.defineProperty( obj, key, config );
};
// 使用方法
var person = Object.create( null );defineProp( person, "car", "Delorean" );
defineProp( person, "dateOfBirth", "1981" );
defineProp( person, "hasBeard", false );
// 4. Object.defineProperties
//设置属性
Object.defineProperties(
newObject,
{ "someKey": { value: "Hello World", writable: true },
 "anotherKey": { value: "Foo bar", writable: false }
});
// 3和4的获取属性方法同1,2.

Basiskonstruktor

Wir wissen, dass es in JS kein Klassenkonzept gibt. Es unterstützt aber auch das Erstellen von Objekten mithilfe von Konstruktoren.

Durch die Verwendung des Schlüsselworts [new] können wir eine Funktion dazu bringen, sich wie ein Konstruktor zu verhalten, um eine eigene Objektinstanz zu erstellen.

Eine grundlegende Konstruktorform lautet wie folgt:

function Car( model, year, miles ) {
  //这里，this指向新建立的对象自己
  this.model = model;
  this.year = year;
  this.miles = miles;
  this.toString = function () {
    return this.model + " has done " + this.miles + " miles";
  };
}
//用法
// 建立两个car实例
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
// 输出结果
console.log( civic.toString() );
console.log( mondeo.toString() );

Dies ist das einfache Konstruktormuster,

Erstens ist es schwierig zu vererben; zweitens wird toString() einmal für jede Objektinstanz definiert und sollte von jeder Instanz des Car-Typs gemeinsam genutzt werden.

Konstrukteur verwendet Prototypen

Es gibt eine gute Funktion in JS: Prototyp [Prototyp],

nutzen Sie es, wann Beim Erstellen eines Objekts können alle Eigenschaften im Konstruktorprototyp von der Objektinstanz abgerufen werden.

Auf diese Weise können mehrere Objektinstanzen denselben Prototyp teilen.

Wir verbessern das vorherige Car-Beispiel wie folgt:

function Car( model, year, miles ) {
  this.model = model;
  this.year = year;
  this.miles = miles;
}
Car.prototype.toString = function () {
  return this.model + " has done " + this.miles + " miles";
};
// 用法
var civic = new Car( "Honda Civic", 2009, 20000 );
var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
//输出
console.log( civic.toString() );
console.log( mondeo.toString() );

Im obigen Beispiel wird die toString()-Methode von mehreren Car-Objektinstanzen gemeinsam genutzt .

Verwandte Empfehlungen:

JavaScript-Entwurfsmuster, Fabrikmodus und Konstruktormodus_Javascript-Kenntnisse

Node.js-Design Das Muster verwendet Streams zur Codierung

Eine kurze Einführung in das strukturelle Fliegengewichtsmuster von js-Entwurfsmustern

Das obige ist der detaillierte Inhalt vonBeispielanalyse eines JavaScript-Konstruktormusters. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!