Detaillierte Erläuterung der Erstellung von Objekten basierend auf objektorientiertem JavaScript

Jede von uns erstellte Funktion verfügt über ein Prototypattribut, bei dem es sich um ein Objekt handelt, dessen Zweck darin besteht, Eigenschaften und Methoden zu enthalten, die von allen Instanzen eines bestimmten Typs gemeinsam genutzt werden können. Logischerweise kann es so verstanden werden: Prototyp ist das Prototypobjekt des Objekts, das mit dem Konstruktor erstellt wurde. Der Vorteil der Verwendung eines Prototyps besteht darin, dass alle Objektinstanzen die darin enthaltenen Eigenschaften und Methoden gemeinsam nutzen können. Mit anderen Worten: Sie müssen keine Objektinformationen im Konstruktor definieren, sondern fügen diese Informationen direkt zum Prototyp hinzu.

Die Prototyp-Methode nutzt das Prototyp-Attribut des Objekts, das sein kann wird als die Methode angesehen, die zum Erstellen eines neuen Objekts verwendet wird. Hier verwenden Sie zunächst einen leeren Konstruktor, um den Funktionsnamen festzulegen. Anschließend werden alle Eigenschaften und Methoden direkt dem Prototypattribut zugewiesen. Ich habe das vorherige Beispiel umgeschrieben und der Code lautet wie folgt:

function Car() { }; 
//将所有的属性的方法都赋予prototype属性 
Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.showColor = function() { 
  return this.color; 
}; 
var Car1 = new Car(); 
var Car2 = new Car(); 
document.write(Car1.showColor()+"
");//输出：blue 
document.write(Car2.showColor());//输出：blue

In diesem Code definieren Sie zunächst den Konstruktor Car() ohne Code. Die nächsten Codezeilen definieren die Eigenschaften des Car-Objekts, indem sie der Prototypeigenschaft des Cars Eigenschaften hinzufügen. Beim Aufruf von new Car() werden alle Eigenschaften des Prototyps sofort dem zu erstellenden Objekt zugewiesen, was bedeutet, dass alle Car-Instanzen Zeiger auf die Funktion showColor() speichern. Semantisch gesehen scheinen alle Eigenschaften zu einem Objekt zu gehören, wodurch die Probleme der vorherigen Factory-Methode und Konstruktormethode gelöst werden

Darüber hinaus können Sie mit dieser Methode auch den Instanzoperator verwenden. Überprüfen Sie den Typ des Objekts, auf das eine bestimmte Variable zeigt:

Der Code lautet wie folgt:

document.write(Car1 instanceof Car);    //输出：tru

Der Prototyp-Ansatz scheint eine gute Lösung zu sein. Leider ist es nicht ganz zufriedenstellend. Erstens hat dieser Konstruktor keine Parameter. Mit der Prototyp-Methode können Sie die Attributwerte nicht durch Übergabe von Parametern an den Konstruktor initialisieren, da die Farbattribute von Car1 und Car2 gleich „blau“, die Doors-Attribute gleich 4 und die mpg-Attribute gleich sind 25. Das bedeutet, dass Sie den Standardwert einer Eigenschaft ändern müssen, nachdem das Objekt erstellt wurde, was ärgerlich ist, aber das ist noch nicht alles. Das eigentliche Problem entsteht, wenn Eigenschaften auf Objekte und nicht auf Funktionen verweisen. Die gemeinsame Nutzung von Funktionen verursacht keine Probleme, Objekte werden jedoch selten von mehreren Instanzen gemeinsam genutzt. Bitte betrachten Sie das folgende Beispiel:

function Car() { };//定义一个空构造函数，且不能传递参数 
Car.prototype.color = "blue"; 
Car.prototype.doors = 4; 
Car.prototype.mpg = 25; 
Car.prototype.drivers = new Array("Mike","John"); 
Car.prototype.showColor = function() { 
  return this.color; 
}; 
var Car1 = new Car(); 
var Car2 = new Car(); 
Car1.drivers.push("Bill"); 
document.write(Car1.drivers+"
");//输出：Mike,John,Bill 
document.write(Car2.drivers);//输出 ：Mike,John,Bill

Im obigen Code ist der Attributtreiber ein Zeiger auf ein Array-Objekt, das die beiden Namen „Mike“ und „John“ enthält. Da es sich bei Treibern um Referenzwerte handelt, verweisen beide Instanzen von Car auf dasselbe Array. Dies bedeutet, dass der Wert „Bill“ zu Car1.drivers hinzugefügt wird, der auch in Car2.drivers sichtbar ist. Die Ausgabe eines dieser Zeiger führt dazu, dass die Zeichenfolge „Mike,John,Bill“ angezeigt wird. Da es beim Erstellen von Objekten so viele Probleme gibt, fragen Sie sich bestimmt: Gibt es eine vernünftige Möglichkeit, Objekte zu erstellen? Die Antwort lautet: Ja, Sie müssen eine Kombination aus Konstruktor- und Prototyp-Methoden

gemischte Konstruktor-/Prototyp-Methode verwenden (empfohlen wird die Verwendung von

Durch Mischen der Konstruktormethode und der Prototypmethode können Sie Objekte wie in anderen Programmiersprachen erstellen. Das Konzept ist sehr einfach, dh Sie verwenden den Konstruktor, um alle nichtfunktionalen Eigenschaften des Objekts zu definieren und zu verwenden die Prototyp-Methode zum Definieren der Funktionseigenschaften des Objekts (Methode). Das Ergebnis ist, dass alle Funktionen nur einmal erstellt werden und jedes Objekt seine eigene Objekteigenschaftsinstanz hat. Wir schreiben das vorherige Beispiel wie folgt um:

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.drivers = new Array("Mike","John"); 
}; 
Car.prototype.showColor = function() { 
   return this.color; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
Car1.drivers.push("Bill"); 
document.write(Car1.drivers+"
");//输出：Mike,John,Bill 
documnet.write(Car2.drivers);//输出：Mike,John

Jetzt ist es eher so, als würde man ein normales Objekt erstellen. Alle Nicht-Funktionseigenschaften werden im Konstruktor erstellt, was bedeutet, dass den Eigenschaften mithilfe der Parameter des Objekts Standardwerte zugewiesen werden können Konstruktor, da nur eine Instanz der showColor()-Funktion erstellt wird, sodass keine Speicherverschwendung entsteht. Darüber hinaus hat das Hinzufügen des „Bill“-Werts zum Treiberarray von Car2 keine Auswirkungen auf das Array von Car2, wenn die Werte dieser ausgegeben werden Arrays, Car1.drivers zeigt „Mike, John, Bill“ an und Car2.drivers zeigt „Mike, John“ an. Da die Prototyp-Methode verwendet wird, kann der Operator „instanceof“ weiterhin verwendet werden, um den Typ des Objekts zu bestimmen

Diese Methode ist die Hauptmethode, die von ECMAScript verwendet wird. Einige Entwickler sind jedoch immer noch der Meinung, dass diese Methode nicht perfekt ist.

Für Entwickler, die an andere Sprachen gewöhnt sind, ist die Verwendung einer Hybridmethode nicht möglich Der Konstruktor-/Prototyp-Ansatz fühlt sich möglicherweise weniger harmonisch an. Schließlich verfügen die meisten objektorientierten Sprachen über eine visuelle Darstellung von Eigenschaften und Methoden, wenn sie Klassen definieren:

Java很好地打包了Car类的所有属性和方法，因此看见这段代码就知道它要实现什么功能，它定义了一个对象的信息。批评混合的构造函数/原型方式的人认为，在构造函数内部找属性，在其外部找方法的做法不合逻辑。因此，他们设计了动态原型方法，以提供更友好的编码风格。

动态原型方法的基本想法与混合的构造函数/原型方式相同，即在构造函数内定义非函数属性，而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。下面是用动态原型方法重写的Car：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.drivers = new Array("Mike","John"); 
 //如果Car对象中的_initialized为undefined，表明还没有为Car的原型添加方法 
 if (typeof Car._initialized == "undefined") { 
   Car.prototype.showColor = function() { 
    return this.color; 
   }; 
   Car._initialized = true; //设置为true，不必再为prototype添加方法 
 } 
} 
var Car1 = new Car("red",4,23);//生成一个Car对象 
var Car2 = new Car("blue",3,25); 
Car1.drivers.push("Bill");//向Car1对象实例的drivers属性添加一个元素 
document.write(Car1.drivers+"
");//输出：Mike,John,Bill 
document.write(Car2.drivers);//输出：Mike,John

 直到检查typeof Car._initialize是否等于"undefined"之前，这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义，构造函数将用原型方式继续定义对象的方法，然后把 Car._initialized设置为true。如果这个值定义了(它的值为 true时，typeof 的值为Boolean)，那么就不再创建该方法。简而言之，该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法。该方法只创建并赋值一次，传统的 OOP开发者会高兴地发现，这段代码看起来更像其他语言中的类定义了。 

我们应该采用哪种方式呢？      

如前所述，目前使用最广泛的是混合的构造函数/原型方式。此外，动态原型方式也很流行，在功能上与构造函数/原型方式等价。可以采用这两种方式中的任何一种。不过不要单独使用经典的构造函数或原型方式，因为这样会给代码引入问题。总之JS是基于面向对象的一门客户端脚本语言，我们在学习它的面向对象技术的时候要的留意JS与其他严谨性高的程序语言的不同。也要正确使用JS创建对象的合理的方式，推荐使用构造函数与原型方式的混合方式创建对象实例。这样可以避免许多不必要的麻烦。

以上就是JavaScript基于面向对象之创建对象的全部内容，希望对大家的学习有所帮助。

【相关教程推荐】

1. JavaScript视频教程
2. JavaScript在线手册
3. bootstrap教程