Quelles sont les méthodes de définition des objets javascript ?

Comment définir des objets JavaScript : 1. Méthode d'usine ; 2. Méthode de constructeur ; 3. Méthode de prototype ; 4. Méthode de constructeur mixte ou de prototype 5. Méthode de prototype dynamique ;

L'environnement d'exploitation de ce tutoriel : système Windows 7, JavaScript version 1.8.5, ordinateur DELL G3.

Méthode de définition d'objet Javascript :

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 être créé et lui donner toutes les propriétés et méthodes. 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 la méthode constructeur Dans Aucun objet n'est créé dans la fonction, le mot-clé this est utilisé. 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 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 très 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.

4. Méthode mixte constructeur/prototype

Union utilise la méthode constructeur/prototype pour créer des objets comme les autres langages de programmation, en utilisant le constructeur Définir les propriétés non fonctionnelles des objets et définir des méthodes d'objets à l'aide de prototypes.

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

Recommandations d'apprentissage gratuites associées : Tutoriel vidéo javascript

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!