Les objets dynamiques de JavaScript

Objets JavaScript représentant des fruits

JavaScript a modernisé les langages à objets avec la déclaration dynamique. Il n'y a pas de classes comme en langage C, où l'on définit d'abord les méthodes et attributs, et qui servent ensuite de modèles aux instances.

Un objet JavaScript est défini sous la forme syntaxique d'une fonction, qui correspond à une première instance et que l'on clone pour créer d'autre instances.
En outre cette structure est dynamique, on peut lui ajouter durant l'exécution des méthodes (en fait des fonctions internes) et des attributs.
La principale question est de savoir si, une méthode ou un attribut étant ajoutés dynamiquement à un objet, ils deviennent aussi disponibles pour les objets dérivés, ce que l'on va voir.

Un objet est défini comme une fonction

L'objet se crée en définissant un constructeur, on peut l'assigner à un identifieur pour avoir une instance. L'opérateur this définit une variable comme attribut et une fonction comme méthode. 

function fruit(prix)
{
  var couleur = "rouge";
  this.prix = 5;
}

Le constructeur peut avoir des arguments, et il contient des propriétés.
On assigne le constructeur avec le mot-clé new:

monfruit = new fruit(120);

Il est possible de créer un objet par assignation d'un litéral constitué d'une liste de propriétés/valeurs séparées par une virgule:

monfruit = { couleur:"rouge", prix:5 };

Démo d'assignement statique: 

monfruit = { 
  couleur:"vert", 
  prix:4, 
  orange : 
  { 
    prix:25 
  } 
};
document.write("assignement d'un objet littéral: ");
document.write(monfruit.orange.prix);

Une instance est créée avec l'opérateur new 

function fruit(v)
{
  var couleur = "rouge";  
  this.prix = v;
}
var monfruit=new fruit(120)
document.write(monfruit.prix);

L'attribut couleur ne peut lui être référencé car il est déclaré comme variable locale. C'est un attribut privé (on en parlera plus loin).

L'instance peut être déclarée directement lors de la définition de l'objet à condition d'assigner une valeur aux arguments si on veut y accéder après. Exemple:

var monfruit = new fruit(v = 200)
{
  this.prix = v;
}
document.write(monfruit.prix);

On peut ajouter des propriétés à un objet en cours de traitement

Un objet peut se définir comme une liste de propriétés, équivalent aux attributs d'une classe.

On peut ajouter une propriété directement à un objet déja défini.

nomobjet.nompropriété = xxxx

On accède à la propriété selon la même syntaxe. Exemple pour l'objet fruit dont le prix est une propriété:

alert(fruit.prix);

Un objet peut être redéfini dynamiquement avec la propriété prototype

Pour ajouter dynamiquement une propriété et faire qu'elle soit utilisable par tous les clones dérivés du même objet, même s'ils sont créés avant que la propriété ne soit ajoutée, on utilise le mot réservé prototype.

fruit.prototype.origine = "Europe";

La propriété origine appartient maintenant à monfruit et autres instances éventuellement définies selon fruit.

Exemple d'héritage en JavaScript et modification rétroactive du prototype (avec toutes ses instances):

var monfruit= new fruit(v = 200)
{
  this.prix = v;
}
gala = monfruit;
document.write(gala.prix);

fruit.prototype.origine="Europe";
document.write("origine=" + gala.origine);

Un objet peut contenir d'autres objets assignés comme valeurs d'attributs

Une propriété peut être un autre objet. Dans ce cas on accède aux propriétés de l'objet contenu par une chaîne d'identifieurs séparés par un point.
Par exemple, si l'objet monfruit contient un objet x qui a pour constructeur orange avec la propriété prix, on accède à prix ainsi:

function orange(p)
{
   this.prix = p;
}

x = new orange(25);
monfruit.orange = x;

document.write("prix orange: ");
document.write(monfruit.orange.prix);

On peut aussi intégrer un objet dans un autre sous la forme d'un littéral:

monfruit = { 
  this.prix:120, 
  this.couleur:"rouge", 
  this.orange : { 
    this.prix:25
  } 
};

L'objet monfruit contient l'objet orange défini lui aussi par un litéral. Notez bien les virgules qui séparent les éléments, au lieu de point-virgules.

On peut accèder aux valeurs des attributs comme dans un tableau

On accède aux valeurs des propriétés soit par leur nom, comme on l'a fait précédemment, soit par leur numéro d'ordre dans la liste des propriétés de l'objet, comme avec les éléments d'un tableau, à condition qu'ils correspondant à des objets du document HTML.

Si l'objet ne fait pas partie du document HTML, on accède au contenu par le nom des propriétés ou par un indice si on a ajouté des valeurs selon un indice.

Par exemple, si l'on assigne une valeur par un indice:

fruit[4] = "demo";

on accèdera à la valeur de la même façon:

alert(fruit[4]);

Un objet correspond ainsi à un tableau ambivalent, avec des éléments ordinaux ou des propriétés, contrairement au langage PHP qui utilise les nombres à la fois comme clés et comme ordinaux, ce qui rend le contenu des tableaux indéterminable.

Démo d'accès par indice:

fruit[1] = "démo";
document.write("valeur: ");
document.write(fruit[1]);

On ajoute des méthodes à un objet de façon statique ou dynamique

On peut déclarer une fonction à l'intérieur d'une autre fonction, cela équivaut en JavaScript à définir une méthode dans un objet.

Pour utiliser une méthode, il faut créer une instance de l'objet, elle ne peut être utilisée directement. Noter qu'il est possible de créer un objet statique, comme on le verra plus loin.

Example:

function outer()
{
  x = 10;
  this.inner = function (y)
  {
    return y * 2 + x;
  }
}
var o = new outer();
document.write(o.inner(50));

Et on peut ajouter un attribut ou une méthode dynamiquement:

outer.x2 = 10;
outer.inner2 = function(y)
{
  return y * 2 + x + this.x2;
}
document.write(outer.inner2(50));

Si on déclare la méthode dynamiquement, les attributs ajoutés dynamiquement doivent être référencés avec le mot-clé this.

On peut aussi déclarer attributs et méthodes statiquement à l'intérieur d'un tableau associatif:

var a = 
{
  x : 10,
  inner : function(y)
  {
    return y * 2 + this.x;
  }
}
document.write(a.inner(50));

Ainsi ils peuvent être utilisés de façon statique, directement avec l'objet. Vous ne pouvez pas déclarer d'instance de tableau, mais vous pouvez l'assigner à des variables, l'effet est le même.

Méthodes et attributs sont privés ou publics

Pour créer des membres privés, on limite le scope à l'objet, donc on utilise une déclaration avec var pour une variable et de même pour une fonction on l'assigne à une variable locale.

function pomme()
{
  var privattribut = 0;

  var privfun = function(x)
  {
     alert(x);
  }
}

Au contraire, pour créer des membres auxquels on puisse faire référence hors de l'objet, on leur donne un scope global et le préfixe this.

function pomme()
{
  this.couleur = "rouge";
  this.destination = function(y)
  {
    return (y + " " + this.couleur);
  }
}

Exemple d'utilisation de ces attributs et méthodes publics...

var obj1 = new pomme();
obj1.couleur = "verte";
var resultat = obj1.destination("Hello");
document.write(resultat);

Des exemples sont donnés dans les chapitres consacrés à chaque objet prédéfini (retourner au sommaire).

Voir aussi:

© 2007-2012 Xul.fr