Explication détaillée de six façons de définir les classes par JS

Dans le développement frontal, il est souvent nécessaire de définir les classes JS. Donc, en JavaScript, il existe plusieurs façons de définir des classes et quelles sont les différences? Cet article explique les six façons de définir les classes JS (description du cas):

1. Méthode d'usine

 fonction car () {var ocar = nouvel objet; 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 est créé et toutes les propriétés et méthodes sont attribuées. Utilisez cette fonction pour créer 2 objets avec exactement les mêmes propriétés.

Bien sûr, vous pouvez modifier cette méthode en y faisant passer des paramètres.

 fonction car (couleur, porte) {var ocar = nouvel objet; ocar.color = colore; ocar.doors = porte; ocar.showcolor = function () {document.write (this.color)}; return ocar;} var car1. // Sortie: "Red" car2.showColor () // Sortie: "bleu"

Vous pouvez maintenant obtenir des objets avec différentes valeurs en passant différents paramètres à la fonction.

Dans l'exemple précédent, chaque fois que la voiture de fonction () est appelée, la présentation () est créée, ce qui signifie que chaque objet a sa propre méthode showcolor ().

Mais en fait, chaque objet partage la même fonction. Bien qu'une méthode puisse être définie en dehors de la fonction, alors en pointant les propriétés de la fonction à la méthode.

 fonction showcolor () {alert (this.color);} fonction car () {var ocar = new object (); ocar.color = colore; ocar.doors = porte; ocar.showcolor = showcolor; return ocar;}

Mais cela ne ressemble pas à une méthode de fonction.

2. Méthode du constructeur

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

 Fonction Car (couleur, porte) {this.color = couleur; this.doors = porte; 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 du constructeur ne crée pas d'objets à l'intérieur de la fonction et le mot-clé qui est utilisé. Parce qu'un objet a été créé lors de l'appel du constructeur, et cela ne peut être utilisé que pour accéder aux propriétés d'objet dans la fonction.

Utilisez maintenant nouveau pour créer des objets, il ressemble à ça! Mais c'est la même chose que l'usine. Chaque appel crée sa propre méthode pour l'objet.

3. Méthode prototype

Cette méthode tire parti de l'attribut prototype de l'objet. Tout d'abord, créez le nom de classe avec une fonction vide, puis tous les attributs et méthodes sont affectés à l'attribut prototype.

 fonction 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 attribuées à l'objet à créer immédiatement. Tous les objets de cette fonction Store Pointers pour présenter (), qui semble syntaxiquement appartenir au même objet.

Cependant, cette fonction n'a pas de paramètres et l'attribut ne peut pas être initialisé en passant par des paramètres. La valeur par défaut de l'attribut doit être modifiée après la création de l'objet.

Un problème très grave avec la méthode du prototype est que lorsque l'attribut pointe vers un objet, comme un tableau.

 fonction 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,cclert(car2.arr); // Sortie: AA, BB, CC

Ici, en raison de la valeur de référence du tableau, les deux objets de voiture pointent vers le même tableau, donc lorsque la valeur est ajoutée dans Car1, vous pouvez également la voir dans Car2.

Union est une méthode qui peut créer des objets comme d'autres langages de programmation utilisant le constructeur / prototype. Il s'agit d'une méthode qui utilise des constructeurs pour définir les propriétés non fonctionnelles des objets et utilise des prototypes pour définir des objets.

 Fonction Car (couleur, porte) {this.color = couleur; this.doors = porte; this.arr = new Array ("aa", "bb");} car.prototype.showcolor () {alert (this.color);} var car1 = new Car ("Red", 4); var car2 = new = new Car ("bleu", 4); car1.arr.push ("cc"); alert (car1.arr); //output:aa,bb,ccalert(car2.arr); // Sortie: AA, BB

5. Méthode de prototype dynamique

La méthode du prototype dynamique est similaire à la méthode de constructeur / prototype mixte. La seule différence est la position donnée à la méthode de l'objet.

 Fonction 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._InInitialized = true;};}

La méthode du prototype dynamique consiste à utiliser un drapeau pour déterminer si le prototype a été attribué une méthode. Cela garantit que la méthode n'est créée qu'une seule fois

6. Méthode d'usine mixte

Son professeur de but crée un faux constructeur qui ne renvoie que de nouvelles instances d'un autre objet.

 fonction car () {var ocar = new object (); ocar.color = "red"; ocar.doors = 4; ocar.showColor = function () {alert (this.color)}; return ocar;}

Contrairement à la méthode d'usine, cette méthode utilise le nouvel opérateur.

Ce qui précède sont toutes les méthodes de création d'objets. La méthode la plus utilisée est la méthode de constructeur / prototype hybride, et la méthode de prototype dynamique est également très populaire. Fonctionnellement équivalent à la méthode du constructeur / prototype.

L'explication détaillée ci-dessus des six façons de définir les classes JS est tout le contenu que je partage avec vous. J'espère que vous pourrez vous faire référence et j'espère que vous pourrez soutenir Wulin.com plus.