[JavaScript] T6 :Les objets dynamiques de JavaScript

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.

function voiture(vitesse)
{
  var passagers = 4;
  this.vitesse = vitesse;
}

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

mavoiture = new voiture(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:

mavoiture = { vitesse:120, passagers:4 };

Exemple:

function voiture(v)
{
  this.vitesse = v;
}
var mavoiture=new voiture(120)
document.write(mavoiture.vitesse);

120

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 mavoiture = new voiture(v = 200)
{
  this.vitesse = v;
}
document.write(mavoiture.vitesse);

200

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 voiture dont la vitesse est une propriété:

alert(voiture.vitesse);

Une instance peut modifier la classe 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.

voiture.prototype.consommation = 10;

La propriété consommation appartient maintenant à mavoiture et autres objets éventuellement définis selon voiture.

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

var mavoiture= new voiture(v = 200)
{
  this.vitesse = v;
}
camion = mavoiture;
document.write(camion.vitesse);

voiture.prototype.consommation=50;
document.write("consommation=" + camion.consommation);

200
consommation=50

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 mavoiture contient un objet untel qui a pour constructeur conducteur avec la propriété age, on accède à age ainsi:

function conducteur(age)
{
   this.age = age;
}
untel = new conducteur(25);

mavoiture.conducteur = untel;
document.write(mavoiture.conducteur.age);

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

mavoiture = { 
  vitesse:120, 
  passagers:4, 
  untel : { 
    age:25
  } 
};

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

On accède 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:

voiture[4] = "demo";

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

alert(voiture[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.

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

Quand on imbrique une fonction à l'intérieur d'une autre, en terme d'objets cela équivaut à créer une méthode privée.

Pour créer une méthode publique, donc accessible dans le scope extérieur à l'objet, il faut ajouter dynamiquement la fonction depuis le scope extérieur.

Exemple:

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

110

On voit qu'il y a un certain nombre de limitations:

1. Il faut déclarer la méthode hors de l'objet.
2. Il faut déclarer également les attributs hors de l'objet pour qu'ils soient accessibles à la méthode.
3. Les attributs doivent être référencés par le mot-clé this.

Si l'on veut déclarer attributs et méthodes statiquement à l'intérieur de l'objet, on utilisera plutôt un tableau associatif:

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

120

Ainsi la méthode est à la fois publique et déclarée statiquement. Vous ne pouvez pas déclarer d'instance de tableau, mais vous pouvez l'assigner à des variables, l'effet est le même.

Exemples d'utilisation d'objets

Création d'une instance:

function voiture(vitesse)
{
  var passagers = 4;
  this.vitesse = vitesse;
}
mavoiture = new voiture(120);

document.write("vitesse: ");
document.write(mavoiture.vitesse);

vitesse: 120

Imbriquer dynamiquement un objet dans un autre:

function conducteur(age)
{
  this.age = age;
}
untel = new conducteur(25);
mavoiture.conducteur = untel;
document.write("âge conducteur: ");
document.write(mavoiture.conducteur.age)

âge conducteur: 25

Assignement statique:

mavoiture = { vitesse:120, passagers:4, untel : { age:25 } };
document.write("assignement d'un objet littéral: ");
document.write(mavoiture.untel.age);

assignement d'un objet littéral: 25

Accès par indice:

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

valeur: démo