Explication détaillée de la façon dont les classes sont définies en javascript (quatre façons)_compétences javascript

Les exemples de cet article décrivent comment définir des classes en JavaScript. Partagez-le avec tout le monde pour votre référence, les détails sont les suivants :

La définition de classe comprend quatre manières :

1. Méthode d'usine

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();

Définit une fonction d'usine qui peut créer et renvoyer des objets d'un type spécifique. Cela a l'air bien, mais il y a un petit problème,

Une nouvelle fonction showColor doit être créée à chaque fois qu'elle est appelée, on peut la déplacer en dehors de la fonction,

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

Pointez-le directement dans la fonction usine

Cela évite le problème de la création répétée de fonctions, mais cela ne ressemble pas à une méthode objet.

2. Méthode constructeur

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(); 

Vous pouvez voir la différence avec la première méthode. Il n'y a aucun objet créé à l'intérieur du constructeur, mais le mot-clé this est utilisé.

Lors de l'utilisation de new pour appeler le constructeur, un objet est d'abord créé puis accessible à l'aide de this.

Cet usage est très similaire à d'autres langages orientés objet, mais cette méthode a le même problème que la précédente, qui est de créer des fonctions à plusieurs reprises.

3. Méthode prototype

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();

Le constructeur Car est d'abord défini sans aucun code, puis les propriétés sont ajoutées via un prototype. Avantages :

a. Toutes les instances stockent des pointeurs vers showColor, ce qui résout le problème de la création répétée de fonctions

b. Vous pouvez utiliser instanceof pour vérifier le type d'objet

Inconvénients, ajoutez le code suivant :

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

les pilotes sont des pointeurs vers des objets Array, et les deux instances de proCar pointent vers le même tableau.

4. Méthode de prototype dynamique

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);

Cette méthode est ma préférée. Toutes les définitions de classe sont complétées dans une fonction. Cela ressemble beaucoup aux définitions de classe dans d'autres langages qui ne seront pas créées à plusieurs reprises.