Detaillierte Erläuterung der Erstellung von Objekten basierend auf objektorientierten JavaScript (1)_Javascript-Kenntnissen

Dieses Mal werden wir uns eingehend mit der objektorientierten JavaScript-Technologie befassen. Bevor wir lernen, müssen wir einige objektorientierte Begriffe erklären. Das ist es, was alle objektorientierten Sprachen gemeinsam haben. Es gibt mehrere objektorientierte Begriffe:
1. Objekt
ECMA-262 definiert ein Objekt als „eine ungeordnete Sammlung von Attributen, jedes Attribut speichert einen primitiven Wert, ein Objekt oder eine Funktion“. Streng genommen bedeutet dies, dass ein Objekt ein Array von Werten in keiner bestimmten Reihenfolge ist. Obwohl ECMAScript Objekte auf diese Weise definiert, ist seine allgemeinere Definition eine codebasierte Darstellung eines Substantivs (einer Person, eines Ortes oder einer Sache).
2. Kategorie
Jedes Objekt wird durch eine Klasse definiert, die man sich als Rezept für ein Objekt vorstellen kann. Eine Klasse definiert nicht nur die Schnittstelle des Objekts (die Eigenschaften und Methoden, auf die Entwickler zugreifen), sondern auch das Innenleben des Objekts (den Code, der die Eigenschaften und Methoden zum Funktionieren bringt). Sowohl Compiler als auch Interpreter erstellen Objekte basierend auf Klassenspezifikationen.
3. Beispiele
Wenn ein Programm eine Klasse zum Erstellen eines Objekts verwendet, wird das generierte Objekt als Instanz der Klasse bezeichnet. Die einzige Grenze für die Anzahl der Objekte, die eine Klasse generieren kann, ergibt sich aus dem physischen Speicher der Maschine, auf der der Code ausgeführt wird. Jede Instanz verhält sich gleich, aber die Instanz verarbeitet einen unabhängigen Datensatz. Der Prozess der Erstellung von Objektinstanzen aus einer Klasse wird als Instanziierung bezeichnet.
Im vorherigen Kapitel haben wir erwähnt, dass ECMAScript keine formalen Klassen hat. Im Gegensatz dazu beschreibt ECMA-262 Objektdefinitionen als Rezepte für Objekte. Dies ist ein Kompromiss in der ECMAScript-Logik, da die Objektdefinition tatsächlich das Objekt selbst ist. Auch wenn eine Klasse nicht wirklich existiert, nennen wir die Objektdefinition eine Klasse, weil die meisten Entwickler mit dieser Terminologie besser vertraut sind und weil beide funktional gleichwertig sind.
Die Verwendung vordefinierter Objekte ist nur ein Teil der Fähigkeiten einer objektorientierten Sprache. Ihre wahre Stärke liegt in der Fähigkeit, eigene dedizierte Objekte zu erstellen. ECMAScript verfügt über viele Methoden zum Erstellen von Objekten.
1. Ursprüngliche Methode
Da die Eigenschaften eines Objekts dynamisch definiert werden können, nachdem das Objekt erstellt wurde, haben viele Entwickler bei der Einführung von JavaScript Code ähnlich dem folgenden geschrieben:

var Car = new Object(); 
Car.color = "blue"; 
Car.doors = 4; 
Car.mpg = 25; 
Car.showColor = function() { 
  return this.color; 
}; 
document.write(Car.showColor());//输出：blue 

Erstellen Sie im obigen Code das Objekt Car. Geben Sie ihm dann ein paar Attribute: Er ist blau, hat vier Türen und erreicht 25 Meilen pro Gallone. Das letzte Attribut ist eigentlich ein Zeiger auf eine Funktion, was bedeutet, dass das Attribut eine Methode ist. Nach Ausführung dieses Codes kann das Objekt Car verwendet werden. Hier gibt es jedoch ein Problem: Möglicherweise müssen wir mehrere Car-Instanzen erstellen, was dazu führt, dass wir viele ähnliche Codes wiederholen, was sehr problematisch ist.
2. Fabrikmethode
Um das oben genannte Problem mehrerer ähnlicher Objektdeklarationen zu lösen, haben Entwickler Fabriken erstellt, die Objekte bestimmter Typen erstellen und zurückgeben können. Mit dieser Methode soll das Problem der großen Duplizierung instanziierter Objekte gelöst werden.
(1) Factory-Methode ohne Parameter
Beispielsweise kann die Funktion createCar() verwendet werden, um die zuvor aufgeführten Vorgänge zum Erstellen eines Car-Objekts zu kapseln:

function createCar() { 
var TempCar = new Object(); 
TempCar.color = "blue"; 
TempCar.doors = 4; 
TempCar.mpg = 25; 
TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar(); 
var Car2 = createCar(); 
document.write(Car1.showColor()+"<br/>");//输出：blue 
document.write(Car2.showColor());//输出：blue 

Hier ist der gesamte Code aus dem ersten Beispiel in der Funktion createCar() enthalten. Darüber hinaus gibt es eine zusätzliche Codezeile, die ein TempCar-Objekt als Funktionswert zurückgibt. Durch den Aufruf dieser Funktion wird ein neues Objekt erstellt und ihm alle erforderlichen Attribute zugewiesen, wobei das zuvor erläuterte Car-Objekt kopiert wird. Mit diesem Ansatz können wir also problemlos zwei Versionen des Car-Objekts (Car1 und Car2) mit genau denselben Eigenschaften erstellen.
(2) Factory-Methode mit Parametern
Wir können die Funktion createCar() auch so ändern, dass ihr der Standardwert jedes Attributs übergeben wird, anstatt dem Attribut einfach einen Standardwert zu geben:

function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = function() { 
    return this.color; 
 }; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

Durch das Hinzufügen von Parametern zur Funktion createCar() können Sie den Attributen Farbe, Türen und MPG des zu erstellenden Car-Objekts Werte zuweisen. Dadurch haben zwei Objekte die gleichen Eigenschaften, aber unterschiedliche Eigenschaftswerte.
Die Factory-Methode löst das Problem der wiederholten Instanziierung, es besteht jedoch immer noch ein Problem: Im vorherigen Beispiel muss bei jedem Aufruf der Funktion createCar () eine neue Funktion showColor () erstellt werden, was bedeutet, dass jedes Objekt hat eine eigene showColor()-Version. Tatsächlich hat jedes Objekt die gleiche Funktion. Einige Entwickler definieren die Methode des Objekts außerhalb der Factory-Funktion und verweisen dann über ein Attribut auf die Methode, um dieses Problem zu vermeiden:

function showColor() { 
   return this.color; 
}; 
function createCar(Color,Doors,Mpg) { 
 var TempCar = new Object(); 
 TempCar.color = Color; 
 TempCar.doors = Doors; 
 TempCar.mpg = Mpg; 
 TempCar.showColor = showColor; 
 return TempCar; 
}; 
var Car1 = createCar("red",4,23); 
var Car2 = createCar("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

在上面这段重写的代码中，在函数 createCar()之前定义了函数 showColor()。在createCar()内部，赋予对象一个指向已经存在的 showColor() 函数的指针。从功能上讲，这样解决了重复创建函数对象的问题；但是从语义上讲，该函数不太像是对象的方法。所有这些问题都引发了开发者定义的构造函数的出现。
3、构造函数方式
创建构造函数就像创建工厂方式的函数一样容易。第一步选择构造函数的名字。根据惯例，这个名字的首字母大写，以使它与首字母通常是小写的变量名分开。除了这点不同，构造函数看起来很像工厂方式的函数。请看下面的例子：

function Car(Color,Doors,Mpg) { 
 this.color = Color; 
 this.doors = Doors; 
 this.mpg = Mpg; 
 this.showColor = function() { 
    return this.color; 
 }; 
}; 
var Car1 = new Car("red",4,23); 
var Car2 = new Car("blue",3,25); 
document.write(Car1.showColor()+"<br/>");//输出：red 
document.write(Car2.showColor());//输出：blue 

       下面为您解释上面的代码与工厂方式的差别。首先在构造函数内没有创建对象，而是使用this关键字。使用new运算符构造函数时，在执行第一行代码前先创建一个对象，只有用this才能访问该对象。然后可以直接赋予this属性，默认情况下是构造函数的返回值（不必明确使用 return 运算符）。现在，用new运算符和对象名Car创建对象，就更像 ECMAScript 中一般对象的创建方式了。
      就像工厂方式的函数，构造函数会重复生成函数，为每个对象都创建独立的函数版本。不过，与工厂方式的函数相似，也可以用外部函数重写构造函数，同样地，这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。在下篇文章中会详细的分析面向对象的原型方式以及其他综合的方式。

以上就是本文的全部内容，希望对大家的学习javascript程序设计有所帮助。