Heim > Web-Frontend > js-Tutorial > Was sind die Definitionsmethoden für Javascript-Objekte?

Was sind die Definitionsmethoden für Javascript-Objekte?

coldplay.xixi
Freigeben: 2023-01-03 09:32:07
Original
2887 Leute haben es durchsucht

So definieren Sie JavaScript-Objekte: 1. Konstruktormethode; 3. Gemischte Konstruktor- oder Prototypenmethode;

Was sind die Definitionsmethoden für Javascript-Objekte?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, DELL G3-Computer.

Javascript-Objektdefinitionsmethode:

1. Factory-Methode

  function Car(){
   var ocar = new Object;
   ocar.color = "blue";
   ocar.doors = 4;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  var car1 = Car();
  var car2 = Car();
Nach dem Login kopieren

Wenn diese Funktion aufgerufen wird, wird ein neues Objekt erstellt und ihm werden alle Eigenschaften und Methoden zugewiesen. Verwenden Sie diese Funktion, um zwei Objekte mit genau den gleichen Eigenschaften zu erstellen. Natürlich kann meine Schwester diese Methode ändern, indem sie ihr Parameter übergibt.

  function Car(color,door){
   var ocar = new Object;
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = function(){
    document.write(this.color)
   };
   return ocar;
  }
  var car1 = Car("red",4);
  var car2 = Car("blue",4);
  car1.showColor()  //output:"red"
  car2.showColor()  //output:"blue"
Nach dem Login kopieren

Jetzt können Sie Objekte mit unterschiedlichen Werten erhalten, indem Sie unterschiedliche Parameter an die Funktion übergeben.

Im vorherigen Beispiel wird showcolor() jedes Mal erstellt, wenn die Funktion Car() aufgerufen wird, was bedeutet, dass jedes Objekt seine eigene showcolor()-Methode hat.

Aber tatsächlich hat jedes Objekt die gleiche Funktion.

Obwohl es möglich ist, eine Methode außerhalb einer Funktion zu definieren und dann die Attribute der Funktion auf die Methode zu verweisen.

  function showColor(){
   alert(this.color);
  }
  function Car(){
   var ocar = new Object();
   ocar.color = color;
   ocar.doors = door;
   ocar.showColor = showColor;
   return ocar;
  }
Nach dem Login kopieren

Aber das sieht nicht nach einer Funktionsmethode aus.

2. Konstruktormethode

Die Konstruktormethode ist genauso einfach wie die Factory-Methode, wie unten gezeigt:

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.showColor = function(){
    alert(this.color)
   };
  }
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
Nach dem Login kopieren

Sie können sehen, dass die Konstruktormethode kein Objekt innerhalb der Funktion erstellt, sondern das Schlüsselwort this verwendet. Denn das Objekt wurde beim Aufruf des Konstruktors erstellt und nur über dieses kann auf die Objekteigenschaften innerhalb der Funktion zugegriffen werden.

Benutze jetzt new, um Objekte zu erstellen, es sieht so aus! Aber es ist dasselbe wie der Fabrikansatz. Jeder Aufruf erstellt eine eigene Methode für das Objekt.

3. Prototyp-Methode

Diese Methode verwendet das Prototyp-Attribut des Objekts. Zuerst wird der Klassenname mit einer leeren Funktion erstellt, dann wird allen Eigenschaften und Methoden das Prototyp-Attribut zugewiesen.

  function Car(){
  }
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  var car1 = new Car();
  var car2 = new Car();
Nach dem Login kopieren

In diesem Code wird zunächst eine leere Funktion definiert und dann werden die Eigenschaften des Objekts über das Prototypattribut definiert. Beim Aufruf dieser Funktion werden alle Eigenschaften des Prototyps sofort dem zu erstellenden Objekt zugewiesen. Alle Objekte dieser Funktion speichern Zeiger auf showColor() und scheinen syntaktisch alle zum selben Objekt zu gehören.

Diese Funktion hat jedoch keine Parameter und die Eigenschaften können nicht durch Übergabe von Parametern initialisiert werden. Der Standardwert der Eigenschaften muss nach der Erstellung des Objekts geändert werden.

Ein sehr ernstes Problem bei der Prototypenmethode besteht darin, dass das Attribut auf ein Objekt verweist, beispielsweise auf ein Array.

  function Car(){
  }
  Car.prototype.color = "red";
  Car.prototype.doors = 4;
  Car.prototype.arr = new Array("a","b");
  Car.prototype.showColor = function(){
   alert(this.color);
  }
  var car1 = new Car();
  var car2 = new Car();
  car1.arr.push("cc");
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb,cc
Nach dem Login kopieren

Aufgrund des Referenzwerts des Arrays zeigen die beiden Objekte von Car auf dasselbe Array, sodass der Wert, wenn er zu car1 hinzugefügt wird, auch in car2 sichtbar ist.

4. Gemischte Konstruktor-/Prototyp-Methode

Union verwendet die Konstruktor-/Prototyp-Methode, um Objekte wie andere Programmiersprachen zu erstellen. Sie verwendet den Konstruktor, um die Nicht-Funktionsattribute des Objekts zu definieren, und die Prototyp-Methode, um das Objekt zu definieren . Methode.

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
  }
  Car.prototype.showColor(){
   alert(this.color);
  }
  var car1 = new Car("red",4);
  var car2 = new Car("blue",4);
  car1.arr.push("cc");
  alert(car1.arr);  //output:aa,bb,cc
  alert(car2.arr);  //output:aa,bb
Nach dem Login kopieren

5. Dynamische Prototypmethode

Das Prinzip der dynamischen Prototypmethode ähnelt der gemischten Konstruktor-/Prototypmethode. Der einzige Unterschied besteht darin, wo die Objektmethoden zugewiesen werden.

  function Car(color,door){
   this.color = color;
   this.doors = door;
   this.arr = new Array("aa","bb");
   if(typeof Car._initialized == "undefined"){
    Car.prototype.showColor = function(){
     alert(this.color);
    };
    Car._initialized = true;
   }
  }
Nach dem Login kopieren

Die dynamische Prototypmethode verwendet ein Flag, um zu bestimmen, ob dem Prototyp eine Methode zugewiesen wurde. Dadurch wird sichergestellt, dass die Methode nur einmal erstellt wird

6. Gemischte Factory-Methode

Ihr Zweck besteht darin, einen gefälschten Konstruktor zu erstellen und nur eine neue Instanz eines anderen Objekts zurückzugeben.

  function Car(){
   var ocar = new Object();
   ocar.color = "red";
   ocar.doors = 4;
   ocar.showColor = function(){
    alert(this.color)
   };
   return ocar;
  }
Nach dem Login kopieren

Der Unterschied zur Factory-Methode besteht darin, dass diese Methode den neuen Operator verwendet.

Die oben genannten Methoden sind alle Methoden zum Erstellen von Objekten. Die derzeit am weitesten verbreitete Methode ist die gemischte Konstruktor-/Prototyp-Methode. Darüber hinaus erfreut sich auch die dynamische Prototyp-Methode großer Beliebtheit. Funktional äquivalent zum Konstruktor/Prototyp-Ansatz.

Verwandte kostenlose Lernempfehlungen: Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonWas sind die Definitionsmethoden für Javascript-Objekte?. 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