Detaillierte Erklärung, wie Klassen in Javascript definiert werden (vier Möglichkeiten)_Javascript-Kenntnisse

Die Beispiele in diesem Artikel beschreiben, wie Klassen in JavaScript definiert werden. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Klassendefinition umfasst vier Möglichkeiten:

1. Fabrikmethode

function createCar(name,color,price){
  var tempcar=new Object;
  tempcar.name=name;
  tempcar.color=color;
  tempcar.price=price;
  tempcar.getName=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
  return tempcar;
}
var car1=new createCar("工厂桑塔纳","red","121313");
car1.getName();

Definiert eine Factory-Funktion, die Objekte eines bestimmten Typs erstellen und zurückgeben kann. Sie sieht gut aus, aber es gibt ein kleines Problem,

Bei jedem Aufruf muss eine neue Funktion showColor erstellt werden. Wir können sie außerhalb der Funktion verschieben,

function getName(){
  document.write(this.name+"-----"+this.color+"<br>");
}

Zeigen Sie direkt in der Factory-Funktion darauf

Code kopieren Der Code lautet wie folgt:

tempCar.getName = getName;

Dadurch wird das Problem der wiederholten Erstellung von Funktionen vermieden, es sieht jedoch nicht wie eine Objektmethode aus.

2. Konstruktormethode

function Car(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.getColor=function(){
   document.write(this.name+"-----"+this.color+"<br>");
  };
}
var car2=new Car("构造桑塔纳","red","121313");
car2.getColor(); 

Sie können den Unterschied zur ersten Methode sehen. Im Konstruktor wird kein Objekt erstellt, sondern das Schlüsselwort this verwendet.

Beim Aufruf des Konstruktors mit new wird zunächst ein Objekt erstellt und dann damit darauf zugegriffen.

Diese Verwendung ist anderen objektorientierten Sprachen sehr ähnlich, aber diese Methode weist das gleiche Problem wie die vorherige auf, nämlich die wiederholte Erstellung von Funktionen.

3. Prototypenmethode

function proCar(){
}
proCar.prototype.name="原型";
proCar.prototype.color="blue";
proCar.prototype.price="10000";
proCar.prototype.getName=function(){
  document.write(this.name+"-----"+this.color+"<br>");
};
var car3=new proCar();
car3.getName();

Der Konstruktor Car wird zunächst ohne Code definiert und dann werden die Eigenschaften durch den Prototyp hinzugefügt. Vorteile:

a. Alle Instanzen speichern Zeiger auf showColor, was das Problem der wiederholten Erstellung von Funktionen löst

b. Sie können „instanceof“ verwenden, um den Objekttyp zu überprüfen

Code kopieren Der Code lautet wie folgt:

alert(car3 instanceof proCar);//true

Nachteile, fügen Sie den folgenden Code hinzu:

proCar.prototype.drivers = newArray("mike", "sue");
car3.drivers.push("matt");
alert(car3.drivers);//outputs "mike,sue,matt"
alert(car3.drivers);//outputs "mike,sue,matt"

Treiber sind Zeiger auf Array-Objekte, und beide Instanzen von proCar verweisen auf dasselbe Array.

4. Dynamische Prototypenmethode

function autoProCar(name,color,price){
  this.name=name;
  this.color=color;
  this.price=price;
  this.drives=new Array("mike","sue");
  if(typeof autoProCar.initialized== "undefined"){
   autoProCar.prototype.getName =function(){
   document.write(this.name+"-----"+this.color+"<br>");
   };
   autoProCar.initialized=true;
  }
}
var car4=new autoProCar("动态原型","yellow","1234565");
car4.getName();
car4.drives.push("newOne");
document.write(car4.drives);

Diese Methode ist meine Lieblingsmethode. Es sieht so aus, als ob Klassendefinitionen in anderen Sprachen nicht wiederholt werden

Ich hoffe, dass dieser Artikel für alle hilfreich ist, die sich mit der JavaScript-Programmierung befassen.