Il existe plusieurs manières courantes de définir des classes ou des objets en JavaScript : approche d'usine
function createCar(couleur, portes, mpg){
var tempCar = nouvel objet ;
tempCar.color = couleur;
tempCar.doors = portes;
tempCar.mpg = mpg;
tempCar.showColor = fonction (){
alert( ce .color);
} ;
retourner tempCar ;
}
var car1 = createCar("rouge", 4, 23);
var car2 = createCar("bleu", 3, 25);
car1.showColor();
car2.showColor();
Définition d'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. Nous pouvons la déplacer en dehors de la fonction. fonction showColor(){ alerte(this.color); } Pointez-le directement dans la fonction usine tempCar.showColor = showColor; Cela évite le problème de la création répétée de fonctions, mais cela ne ressemble pas à une méthode objet. Mode constructeur
fonction Voiture(sColor, iDoors, iMpg){
ce .color = sColor ;
ceci .doors = iDoors ;
ce .mpg = iMpg ;
ceci .showColor = fonction (){
alert( ce .color);
} ;
}
var car1 = nouvelle voiture("rouge", 4, 23);
var car2 = nouvelle voiture("bleu", 3, 25);
car1.showColor();
car2.showColor();
Vous pouvez voir la différence avec la première méthode. Aucun objet n'est créé à l'intérieur du constructeur, mais le mot-clé this est utilisé. Lors de l'appel du constructeur à l'aide de new, 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 pose le même problème que la précédente, qui est de créer des fonctions de manière répétée. Une approche hybride constructeur/prototype de la construction
Cette méthode consiste à utiliser la méthode constructeur et la méthode prototype en même temps. En combinant leurs avantages, la méthode constructeur a déjà été introduite. Jetons maintenant un coup d'œil à la méthode prototype. fonction Voiture(){
}
Car.prototype.color = "rouge" ;
Car.prototype.doors = 4 ;
Car.prototype.mpg = 23 ;
Car.prototype.showColor = fonction (){
alert( ce .color);
} ;
var car1 = nouvelle voiture ();
var car2 = nouvelle voiture ();
Tout d'abord, le constructeur Car est défini sans aucun code, puis les propriétés sont ajoutées via le prototype. avantage: 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 alerte (instance car1 de voiture); // vrai Inconvénients, ajoutez le code suivant :
Car.prototype.drivers = new Array("mike", "poursuivre en justice");
car1.drivers.push("mat");
alert(car1.drivers); //sortie "mike,sue,matt"
alert(car2.drivers); //sortie "mike,sue,matt"
les pilotes sont des pointeurs vers des objets Array, et les deux instances de Car pointent vers le même tableau.
Utilisons la méthode de mélange suivante : fonction Voiture(sColor, iDoors, iMpg){
ce .color = sColor ;
ceci .doors = iDoors ;
ce .mpg = iMpg ;
this .drivers = new Array("mike", "sue");
}
Car.prototype.showColor = fonction (){
alert( ce .color);
} ;
var car1 = nouvelle voiture("rouge", 4, 23);
var car2 = nouvelle voiture("bleu", 3, 25);
car1.drivers.push("mat");
alerte (car1.drivers);
alerte (car2.drivers);
De cette façon, il n'y a pas de problème et vous pouvez également utiliser instanceof prototypage dynamique
fonction Voiture(sColor, iDoors, iMpg){
ce .color = sColor ;
ceci .doors = iDoors ;
ce .mpg = iMpg ;
this .drivers = new Array("mike", "sue");
if ( typeof Car.initialized == "indéfini"){
Car.prototype.showColor = fonction (){
alert( ce .color);
} ;
Car.initialized = true ;
}
}
var car1 = nouvelle voiture("rouge", 4, 23);
var car2 = nouvelle voiture("bleu", 3, 25);
car1.drivers.push("mat");
alerte (car1.drivers);
alerte (car2.drivers);
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. Les fonctions ne seront pas créées à plusieurs reprises.
