Explication des méthodes de définition des classes en JS

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

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 tous les attributs. lui seront donnés et la méthode . 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.

  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 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 attributs de la fonction vers la 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 n'a pas < à l'intérieur de la fonction. 🎜>Pour créer un objet , utilisez 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, ç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 ils semblent tous appartenir syntaxiquement au même objet.

Mais cette fonction n'a pas de paramètres 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 très sérieux avec la méthode prototype survient lorsque la propriété 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

Ici, 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 vu dans la voiture2. Union est une méthode qui utilise des méthodes constructeur/prototype pour créer des objets comme d'autres langages de programmation. Elle utilise des constructeurs pour définir les attributs non fonctionnels des objets et des méthodes prototypes pour définir des objets.

 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

5. 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 affecté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 du prototype dynamique utilise un indicateur pour déterminer si une méthode a été affectée au prototype. Cela garantit que la méthode n'est créée qu'une seule fois

6. 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 le new

opérateur. 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.

Articles associés :

Explication de la syntaxe de base et des variables de JavaScript

Explication de certaines méthodes de base et couramment utilisées dans js

Réponses détaillées à la syntaxe de base de js

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!