Explication détaillée de la méthode de définition des classes dans les compétences javascript_javascript

Il existe de nombreuses façons de définir des classes en JS :

1. Méthode d'usine

Copier le code Le code est le suivant :

fonction Voiture(){
var ocar = nouvel objet
ocar.color = "bleu";
ocar.doors = 4;
ocar.showColor = function(){
Document.write(this.color)
};
Retournez ocar
}
var voiture1 = Voiture();
var voiture2 = Voiture();

Lorsque cette fonction est appelée, un nouvel objet sera créé et toutes les propriétés et méthodes lui seront assignées. Utilisez cette fonction pour créer 2 objets avec exactement les mêmes propriétés. Bien entendu, ma sœur peut modifier cette méthode en lui passant des paramètres.

Copier le code Le code est le suivant :

function Car(couleur,porte){
var ocar = nouvel objet
ocar.color = couleur;
ocar.doors = porte;
ocar.showColor = function(){
Document.write(this.color)
};
Retournez ocar
}
var car1 = Voiture("rouge",4);
var car2 = Voiture("bleu",4);
car1.showColor() //sortie : "rouge"
car2.showColor() //sortie : "bleu"

Vous pouvez désormais obtenir des objets avec des valeurs différentes en passant différents paramètres à la fonction.
Dans l'exemple précédent, showcolor() est créé à chaque fois que la fonction Car() est appelée, ce qui signifie que chaque objet possède sa propre méthode showcolor().

Mais en fait, chaque objet partage la même fonction.
Bien qu'il soit possible de définir une méthode en dehors d'une fonction, puis de pointer les propriétés de la fonction vers la méthode.

Copier le code Le code est le suivant :

fonction showColor(){
alert(this.color);
}
fonction Voiture(){
var ocar = new Objet();
ocar.color = couleur;
ocar.doors = porte;
ocar.showColor = showColor;
Retournez ocar
}

Mais cela ne ressemble pas à une méthode fonctionnelle.

2. Méthode constructeur

La méthode constructeur est aussi simple que la méthode usine, comme indiqué ci-dessous :

Copier le code Le code est le suivant :

function Car(couleur,porte){
This.color = couleur;
This.doors = porte;
This.showColor = function(){
alerte(this.color)
};
}
var car1 = nouvelle voiture("rouge",4);
var car2 = nouvelle voiture("bleu",4);

Vous pouvez voir que la méthode constructeur ne crée pas d'objet à l'intérieur de la fonction, mais utilise le mot-clé this. Parce que l'objet a été créé lorsque le constructeur est appelé, et seul celui-ci peut être utilisé pour accéder aux propriétés de l'objet à l'intérieur de la fonction.
Utilisez maintenant new pour créer des objets, cela ressemble à ceci ! Mais c'est la même chose que l'approche d'usine. Chaque appel crée sa propre méthode pour l'objet.

3. Méthode prototype

Cette méthode utilise l'attribut prototype de l'objet. Tout d'abord, le nom de la classe est créé avec une fonction vide, puis toutes les propriétés et méthodes se voient attribuer l'attribut prototype.

Copier le code Le code est le suivant :

fonction Voiture(){
}
Car.prototype.color = "rouge"
Voiture.prototype.portes = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = nouvelle voiture ();
var car2 = nouvelle voiture ();

Dans ce code, une fonction vide est d'abord définie, puis les propriétés de l'objet sont définies via l'attribut prototype. Lorsque cette fonction est appelée, toutes les propriétés du prototype seront immédiatement affectées à l'objet à créer. Tous les objets de cette fonction stockent des pointeurs vers showColor(), et syntaxiquement, ils semblent tous appartenir au même objet.
Cependant, cette fonction n'a aucun paramètre et les propriétés ne peuvent pas être initialisées en passant des paramètres. La valeur par défaut des propriétés doit être modifiée après la création de l'objet.
Un problème sérieux avec la méthode prototype survient lorsque la propriété pointe vers un objet, tel qu'un tableau.

Copier le code Le code est le suivant :

fonction Voiture(){
}
Car.prototype.color = "rouge"
Voiture.prototype.portes = 4;
Car.prototype.arr = new Array("a","b");
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = nouvelle voiture ();
var car2 = nouvelle voiture ();
car1.arr.push("cc");
alert(car1.arr); //sortie:aa,bb,cc
alert(car2.arr); //sortie:aa,bb,cc

En raison de la valeur de référence du tableau, les deux objets de Car pointent vers le même tableau, donc lorsque la valeur est ajoutée à car1, elle peut également être vue dans car2.
Union est une méthode qui utilise la méthode constructeur/prototype pour créer des objets comme les autres langages de programmation. Elle utilise le constructeur pour définir les attributs non fonctionnels de l'objet et la méthode prototype pour définir l'objet.

Copier le code Le code est le suivant :

function Car(couleur,porte){
This.color = couleur;
This.doors = porte;
This.arr = new Array("aa","bb");
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = nouvelle voiture("rouge",4);
var car2 = nouvelle voiture("bleu",4);
car1.arr.push("cc");
alert(car1.arr); //sortie:aa,bb,cc
alert(car2.arr); //sortie:aa,bb

5. Méthode de prototype dynamique

Le principe de la méthode du prototype dynamique est similaire à celui de la méthode mixte constructeur/prototype. La seule différence réside dans l'endroit où les méthodes objet sont affectées.

Copier le code Le code est le suivant :

function Car(couleur,porte){
This.color = couleur;
This.doors = porte;
This.arr = new Array("aa","bb");
If(typeof Car._initialized == "undefined"){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = vrai;
}
>

La méthode du prototype dynamique utilise un indicateur pour déterminer si une méthode a été attribuée au prototype. Cela garantit que la méthode n'est créée qu'une seule fois

6. Méthode d'usine de mélange

Son but est de créer un faux constructeur qui renvoie simplement une nouvelle instance d'un autre objet.

Copier le code Le code est le suivant :

fonction Voiture(){
var ocar = new Objet();
ocar.color = "rouge";
ocar.doors = 4;
ocar.showColor = function(){
alerte(this.color)
};
Retournez ocar
}

La différence avec la méthode factory est que cette méthode utilise l'opérateur new.

Ci-dessus sont toutes les méthodes pour créer des objets. La méthode la plus utilisée actuellement est la méthode mixte constructeur/prototype. De plus, la méthode du prototype dynamique est également très populaire. Fonctionnellement équivalent à l’approche constructeur/prototype.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.