Explication détaillée de cinq façons de définir des classes en JS

Nous savons que JavaScript joue désormais un rôle très important dans notre développement. En développement front-end, il est souvent nécessaire de définir des classes JS. Ainsi, en JavaScript, il existe plusieurs façons de définir une classe. Quelles sont-elles ? Cet article explique les cinq façons de définir des classes dans JS comme suit.

1. Méthode Factory

function Car(){
var ocar = new Object;
ocar.color = “blue”;
ocar.doors = 4;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car();
var car2 = Car();

Lorsque cette fonction est appelée, un nouvel objet sera créé et recevra tous ses attributs et méthode. Utilisez cette fonction pour créer 2 objets avec exactement les mêmes propriétés.

Bien sûr, cela peut être modifié en lui passant des paramètres.

function Car(color,door){
var ocar = new Object;
ocar.color = color;
ocar.doors = door;
ocar.showColor = function(){
document.write(this.color)
};
return ocar;
}
var car1 = Car(“red”,4);
var car2 = Car(“blue”,4);
car1.showColor() //output:”red”
car2.showColor() //output:”blue”

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 a sa propre méthode showcolor().

Mais en fait, chaque compartiment d'objets 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 cette méthode.

function showColor(){
  
alert(this.color);
}
function Car(){
var ocar = new Object();
ocar.color = color;
ocar.doors = door;
ocar.showColor = showColor;
return 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 :

   
function Car(color,door){
this.color = color;
this.doors = door;
this.showColor = function(){
alert(this.color)
};
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,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.

Maintenant, utilisez new pour créer des objets, ça ressemble à ça ! 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.

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();

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.

Mais cette fonction n'a pas de paramètres. Vous ne pouvez pas initialiser les propriétés en passant des paramètres. Vous devez modifier la valeur par défaut de la propriété après la création de l'objet.

Un problème sérieux avec la méthode prototype est lorsque l'attribut pointe vers un objet, tel qu'un tableau.

   
function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.arr = new Array(“a”,”b”);
Car.prototype.showColor = function(){
alert(this.color);
}
var car1 = new Car();
var car2 = new Car();
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output: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.

function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
}
Car.prototype.showColor(){
alert(this.color);
}
var car1 = new Car(“red”,4);
var car2 = new Car(“blue”,4);
car1.arr.push(“cc”);
alert(car1.arr); //output:aa,bb,cc
alert(car2.arr); //output:aa,bb

4. Méthode du prototype dynamique

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

   
function Car(color,door){
this.color = color;
this.doors = door;
this.arr = new Array(“aa”,”bb”);
if(typeof Car._initialized == “undefined”){
Car.prototype.showColor = function(){
alert(this.color);
};
Car._initialized = true;
}
}

La méthode de 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

5. Méthode de fabrique mixte

Son but est de créer un faux constructeur et de ne renvoyer qu'une nouvelle instance d'un autre objet.

function Car(){
var ocar = new Object();
ocar.color = “red”;
ocar.doors = 4;
ocar.showColor = function(){
alert(this.color)
};
return 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.

Le contenu ci-dessus est une explication détaillée des cinq façons de définir les classes en JS. J'espère que cela pourra aider tout le monde.

Recommandations associées :

Comment définir des classes et des exemples d'opérations en PHP

JavaScript utilise des fonctions pour implémenter une utilisation détaillée des instances de classe définies

Type personnalisé Javascript, attribut, résumé de code d'exemple de méthode

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!