Detaillierte Erläuterung des Konstruktormusters von JS-Entwurfsmustern

Dieses Mal werde ich Ihnen eine detaillierte Erklärung des Konstruktormusters des JS-Entwurfsmusters und der Vorsichtsmaßnahmen bei der Verwendung des Konstruktormusters des JS-Entwurfsmusters geben. Das Folgende ist ein praktischer Fall. Stehen Sie auf und werfen Sie einen Blick darauf.

In klassischen OOP-Sprachen ist der Konstruktor (auch Konstruktor genannt) eine spezielle Methode, die zum Initialisieren eines Objekts 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();

Allerdings entstehen dadurch nur drei leere Objekte ohne Eigenschaften und Methoden. 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, aber es unterstützt auch die Verwendung von Konstruktoren zum Erstellen von Objekten.

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

Ein Basiskonstruktor hat die folgende Form:

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. Es weist zwei Hauptprobleme auf:

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

Konstrukteur unter Verwendung eines Prototyps

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

Wenn Sie damit ein Objekt erstellen, können alle Eigenschaften im Konstruktorprototyp von der Objektinstanz abgerufen werden.

Dadurch können mehrere Objektinstanzen denselben Prototyp gemeinsam nutzen.

Wir verbessern das vorherige Auto-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. .

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

AngularJS-Implementierung ausgewählter Dropdown-Menüschritte für sekundäre Verknüpfungen, detaillierte Erklärung

Bootstrap- und Vue-Betrieb Benutzerinformationen Hinzufügen und Löschen

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung des Konstruktormusters von JS-Entwurfsmustern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!