Nous savons que JS est orienté objet. En ce qui concerne l'orientation des objets, il est inévitable d'impliquer le concept de classes. Généralement, les langages fortement dactylographiés comme C # et Java ont une syntaxe fixe pour définir des classes. La différence entre JS est qu'il peut utiliser diverses méthodes pour implémenter ses propres classes et objets. Il existe plusieurs méthodes de mise en œuvre générales:
1. Méthode d'usine
La méthode d'usine fait référence à la création d'une fonction d'usine qui renvoie un type d'objet spécifique.
La copie de code est la suivante:
Fonction CreateCar (Scolor, Idoors, IMPG)
{
var otempcar = nouvel objet;
otempcar.color = scolor;
otempcar.doors = idoors;
otempcar.mpg = impg;
otempcar.showcolor = function ()
{
alerte (this.color);
}
retour otempcar;
}
var ocar1 = createCar ("Red", 4,23);
var ocar2 = createCar ("bleu", 3,25);
ocar1.showColor ();
ocar2.showColor ();
De cette façon, chaque fois qu'il appelle sa fonction d'usine, un nouvel objet sera créé. Mais le problème est que chaque fois qu'un nouvel objet est généré, une nouvelle fonction doit être créée, ce qui fait que chaque objet a sa propre version de Showcolor, et en fait, tous les objets partagent la même fonction. La méthode de l'objet est-elle définie en dehors de la fonction d'usine, puis l'objet reçoit un pointeur de la fonction, comme suit
La copie de code est la suivante:
Fonction Showcolor ()
{
alerte (this.color);
}
Fonction CreateCar (Scolor, Idoors, IMPG)
{
var otempcar = nouvel objet;
otempcar.color = scolor;
otempcar.doors = idoors;
otempcar.mpg = impg;
otempcar.showcolor = showcolor;
retour otempcar;
}
var ocar1 = createCar ("Red", 4,23);
var ocar2 = createCar ("bleu", 3,25);
ocar1.showColor ();
ocar2.showColor ();
De cette façon, il n'est pas nécessaire de créer sa propre fonction de vitrine pour chaque objet, mais de créer un pointeur vers cette fonction. Par conséquent, la méthode du constructeur est introduite.
2. Méthode du constructeur
Le constructeur est très similaire à la fonction d'usine, l'exemple de code est le suivant:
La copie de code est la suivante:
voiture de fonction (Scolor, Idoors, IMPG)
{
this.color = scolor;
this.doors = idoors;
this.mpg = impg;
this.showcolor = function ()
{
alerte (this.color);
}
}
var ocar1 = new Car ("rouge", 4,23);
var ocar2 = new Car ("bleu", 3,25);
Dans le constructeur, il n'y a pas d'objet créé en interne, mais le mot-clé qui est utilisé. Lorsque vous appelez le constructeur à l'aide du nouvel opérateur, un objet est créé avant d'exécuter la première ligne de code. Mais quels problèmes se produiront avec cela? Pour résoudre ce problème, la méthode prototype suivante a été introduite.
3. Méthode prototype
Cette méthode tire parti de la propriété prototype de l'objet, qui peut être considérée comme le prototype sur lequel dépend un nouvel objet. Ici, utilisez le constructeur vide pour définir le nom de classe. Ensuite, toutes les méthodes et attributs sont directement attribués à l'attribut prototype. comme suit:
La copie de code est la suivante:
Fonction Car ()
{}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.drivers = new Array ("Mike", "Sue");
Car.prototype.showcolor = function ()
{
alerte (this.color);
}
La méthode prototype ne peut attribuer que directement des valeurs et ne peut pas transmettre des paramètres au constructeur la valeur de l'initialisation de l'attribut. Lorsque vous utilisez cette méthode, vous rencontrerez deux problèmes. Le premier problème est que chaque objet doit être créé avant que la valeur par défaut de l'attribut puisse être modifiée de cette manière. Il n'est pas possible d'avoir directement les valeurs de propriété dont vous avez besoin lors de la création de chaque objet. C'est ennuyeux. Le deuxième problème est lorsque l'attribut se réfère à l'objet. Il n'y aura aucun problème avec le partage des fonctions, mais il y aura des problèmes avec le partage d'objets. Parce que chaque instance doit généralement implémenter son propre objet.
Comme suit:
La copie de code est la suivante:
var ocar1 = new car ();
var ocar2 = new car ();
ocar1.drivers.push ("Matt");
alerte (OCAR1.Drivers); // Sortie "Mike, Sue, Matt"
alerte (OCAR2.Drivers); // Sortie "Mike, Sue, Matt"
Par conséquent, l'attribut des pilotes n'est qu'un pointeur de l'objet, donc toutes les instances partagent réellement le même objet. En raison de ces problèmes, nous introduisons le constructeur d'articulation suivant et la méthode du prototype.
4. Méthode de constructeur / prototype mixte
L'idée de cette méthode est d'utiliser un constructeur pour définir toutes les propriétés non fonctionnelles d'un objet (y compris les propriétés et les attributs ordinaires pointant vers l'objet), et utiliser un prototype pour définir les propriétés de fonction (méthodes) d'un objet. Le résultat est que toutes les fonctions ne sont créées qu'une seule fois, et chaque objet a sa propre instance d'attribut d'objet. L'exemple de code est le suivant:
La copie de code est la suivante:
voiture de fonction (Scolor, Idoors, IMPG)
{
this.color = scolor;
this.doors = idoors;
this.mpg = impg;
this.drivers = new Array ("Mike", "Sue");
}
Car.prototype.showcolor = function ()
{
alerte (this.color);
}
var ocar1 = new Car ("rouge", 4,23);
var ocar2 = new Car ("bleu", 3,25);
ocar1.drivers.push ("Matt");
alerte (OCAR1.Drivers); // Sortie "Mike, Sue, Matt"
alerte (OCAR2.Drivers); // Sortie "Mike, Sue"
Comme on peut le voir à partir de l'exemple de code, cette méthode résout deux problèmes dans la méthode précédente en même temps. Cependant, de cette manière, certains développeurs estiment toujours qu'il n'est pas parfait.
5. Méthode de prototype dynamique
Nous pouvons voir que la plupart des langues orientées objet encapsulent visuellement les propriétés et les méthodes. Cependant, la méthode de vitrine dans la méthode ci-dessus est définie en dehors de la classe. Par conséquent, ils ont conçu une approche prototype dynamique. L'idée de base de cette approche est la même que l'approche du constructeur / prototype mixte, la seule différence est l'emplacement de la méthode d'objet. Comme indiqué ci-dessous:
La copie de code est la suivante:
voiture de fonction (Scolor, Idoors, IMPG)
{
this.color = scolor;
this.doors = idoors;
this.mpg = impg;
this.drivers = new Array ("Mike", "Sue");
if (typeof car._Initialized == "Undefined")
{
Car.prototype.showcolor = function ()
{
alerte (this.color);
}
}
Car._Initialized = true;
}
De cette façon, car.prototype.showcolor n'est créé qu'une seule fois. Cette dépendance rend ce code plus comme la définition de classe dans d'autres langues.
6. Méthode d'usine mixte
Cette approche est généralement une solution de contournement qui ne peut pas être utilisée comme première approche. Son objectif est de créer un faux constructeur qui ne renvoie que de nouvelles instances d'un autre objet.
La copie de code est la suivante:
fonction createCar ()
{
var otempcar = nouvel objet;
otempcar.color = "red";
otempcar.doors = 4;
otempcar.mpg = 23;
otempcar.showcolor = function ()
{
alerte (this.color);
};
retour otempcar;
}
var car = new Car ();
Étant donné que le nouvel opérateur est appelé à l'intérieur du constructeur Car (), le deuxième nouvel opérateur est automatiquement ignoré. Les objets créés à l'intérieur du constructeur sont remis à la variable var. Cette approche a les mêmes problèmes que l'approche classique en termes de gestion interne des méthodes d'objets. Par conséquent, il est fortement recommandé: éviter d'utiliser cette méthode, sauf si elle est absolument nécessaire.