La création d’objets en javascript | Développement Web

La création d’objets en javascript

Reprenons l’exemple des objets de type  Fruit.

Nous allons donc créer notre objet en créant la fonction qui organisera la structure des données. Cette fonction s’appelle le constructeur.

Constructeur des objets de type Fruit

function Fruit(txtColor, txtTree, txtForm){
    this.color = txtColor;
    this.tree= txtTree;
    this.form = txtForm;
}

Les constructeurs commencent en général par une majuscule et attendent en paramètres les données de l’instance de l’objet.

Le mot-clé this désigne l’objet en cours de manipulation ou de création.

Pour instancier un nouvel objet de type Fruit, il faut donc écrire:

    var fruitPomme = new Fruit('verte','pommier','ronde');

La variable fruitPomme est maintenant un objet de type Fruit.
Pour accéder à ses propriétés, nous pouvons utiliser la notation pointée des objets.
La syntaxe est la suivante et permet d’afficher la valeur de la propriété arbre de l’objet fruitPomme.

    document.write(fruitPomme.tree);

Ajouter une méthode

Pour ajouter une méthode à l’objet Fruit, nous allons procéder de la façon suivante:

function Fruit(txtColor, txtTree, txtForm){
    this.color = txtColor;
    this.tree= txtTree;
    this.form = txtForm;
    this.print= showFruit;
}

La méthode ajoutée (print()) est identique à la déclaration d’une propriété à la différence que la fonction showFruit() sera définie dans le script de la manière suivante:

function showFruit(){
    document.write('Arbre du fruit choisi: '+this.tree);
    document.write('< br />Couleur du fruit: '+this.color);
}

On retrouve le mot-clé this qui représente l’objet manipulé sur lequel la méthode est appliquée.
L’appel à la méthode peut aussi se faire avec la notation pointée:

    fruitPomme.print();

Cette syntaxe appellera la méthode print() et l’appliquera sur l’objet fruitPomme.

NB: En utilisant l’écriture « with« , on peut éviter la redondance du mot-clé this:

function showFruit(){
  with(this){
    document.write('Arbre du fruit choisi: '+tree);
    document.write('< br />Couleur du fruit: '+color);
  }
}