JavaScript : créer ses propres objets

Dans le chapitre précédent j'ai évoqué les objets natifs de JavaScript : les dates, les objets string, les objets Math, etc.
Dans cette page je vais vous montrer comment créer votres propres objets et les manipuler.

Prenez l'habitude de "programmer objet". Cette façon de programmer s'impose progressivement dans tous les langages.

Exemple 1 : création d'objets avec seulement des propriétés

Le script

// création d'un objet sous forme d'un tableau avec notation JSON var stylo1 = { type: "bille", couleur: "bleu", marque: "Bic"}; // création d'un objet avec le mot clé new var stylo2 = new Object(); stylo2.type = "pointe"; stylo2.couleur = "rouge"; stylo2.marque = "reynolds"; // afficher propriétés objet stylo1 document.write("objet stylo 1 : " +"<br>"); document.write("type :" + stylo1.type + "<br>"); document.write("couleur :" + stylo1.couleur + "<br>"); document.write("marque :" +stylo1.marque + "<hr>"); // afficher propriétés objet stylo2 document.write("objet stylo 2 :"+"<br>"); for(var i in stylo2) { document.write(i + ":" + stylo2[i] + '<br>'); } document.write("<hr>"); stylo1.couleur ="vert" ; // changer une propriété de l'objet // afficher propriété de l'objet stylo1 document.write("objet stylo 1 :"+"<br>"); for(var i in stylo1) { document.write(i + ":" + stylo1[i] + '<br>'); } document.write("<hr>");

Commentaire

Après avoir créé deux objets j'affiche toutes les propriétés de l'objet stylo1
Chaque propriété correspond en fait à une clé du tableau.

Un objet en JavaScript c'est en fait un tableau associatif avec des paires clé/valeur (propriétés de l'objet) mais aussi des fonctions (les méthodes de l'objet).

Ensuite j'affiche toutes les propriétés de l'objet stylo2 avec la bouche for ... in ...

Puis je modifie la valeur d'une propriété de l'objet stylo1 (changement de couleur) puis j'affiche toutes les propriétés de cet objet avec la boucle for ... in ...
Testez le script !

Création d'un objet avec propriétés et une méthodes

Dans l'exemple précédent les objets ne comprenaient que des propriétés ...
Or si on veut manipuler cet objet il doit comprendre aussi des méthodes !

Le script

// création d'un objet avec trois propriétés et une méthode var mavoiture = { marque: "Renault", modele: "clio", puissance: "90CV", presenter: function () { var presenter = this.marque + "-" + this.modele+ "-" +this.puissance; return presenter; } }; // appel de la méthode presenter de l'objet mavoiture alert(mavoiture.presenter());

Commentaire

l'objet créé se nomme mavoiture et comprend trois propriétés et une méthode.
La méthode se nomme presenter().

Pour décrire une méthode il faut employer les mots réservés function et return. Ce qui est logique : une méthode est une fonction propre à un objet et qui retourne une valeur.

Pour appeler une méthode d'un objet il faut employer la syntaxe : objet.methode(). N'oubliez pas les parenthèses !
Testez le script !

Cloner un modèle d'objet

Le script

// créer un modèle d'objet var Personnage = { nom: "", prenom: "", sexe: "", decrire:function() { var description = this.nom + " " + this.prenom; return description; } , saluer:function() { var salutation ; if (this.sexe =="M") salutation = "Monsieur" ; else salutation ="Madame"; return salutation ; } }; // créer un clone de personnage var personne1 = Object.create(Personnage); personne1.nom = "Dubois"; personne1.prenom = "Julien"; personne1.sexe = "M"; // créer un deuxième clone de personnage var personne2 = Object.create(Personnage); personne2.nom = "Marmin"; personne2.prenom = "Isabelle"; personne2.sexe = "F"; // appel des méthodes saluer et decrire appliquées aux objets alert(personne1.saluer() + " " + personne1.decrire()); alert(personne2.saluer() + " " + personne2.decrire());

On crée un objet personnage ayant trois propriétés (nom, prenom, sexe) et deux méthodes (decrire, saluer).
Les valeurs des propriétés sont des chaînes vides ; c'est logique puisque cet objet sera un modèle !
Remarquez que dans la deuxième méthode consiste à tester la propriété sexe.

Puis on crée deux objets (clones) à partir du modèle personnage grâce à l'instruction : clone = Object.create(modèle)
Ensuite on affecte des propriétés aux clones (personne1 et personne2) grâce à la syntaxe : objet.propriété

Pour afficher toutes les infos sur chaque clone on appelle les méthodes saluer(), decrire() aux objets toujours avec la notation pointée.
Testez le script !

La création de clones aurait été beaucoup plus simple si nous avions utilisé un "constructeur" d'objet.

Définir un constructeur d'objet

Reprenons le thème précédent ! La duplication du modèle d'objet était un peu fastidieuse.
Désormais nous allons définir un "constructeur" d'objets (ou une "classe" d'objets).
Puis nous allons créer facilement des copies de ce modèle (des instances de classe) en appelant le "constructeur".

Le script

// créer le constructeur Personnage function Personnage(lenom,leprenom,lesexe) { this.nom=lenom; this.prenom =leprenom; this.sexe =lesexe; this.decrire =function() { var description = this.nom + " " + this.prenom; return description; } this.saluer =function() { var salutation ; if (this.sexe =="M") salutation = "Monsieur" ; else salutation ="Madame"; return salutation ; } } // fin de la définition de la classe Personnage // créer des instances de la classe personnage personne1 = new Personnage("Dubois", "Julien","M"); personne2 = new Personnage("Marmin", "Isabelle","F"); // appel des méthodes saluer et decrire appliquées aux objets alert(personne1.saluer() + " " + personne1.decrire()); alert(personne2.saluer() + " " + personne2.decrire()

Un constructeur c'est en fait une fonction. Le nom de la fonction est aussi le nom de la classe. Ce nom commence par une majuscule !
La fonction de construction comprend des paramètres mais ne renvoie aucune valeur.
Dans la fonction de construction il faut définir les propriétés et les méthodes.

Le gros intérêt du "constructeur" par rapport à la technique précédente c'est au niveau de la duplication du modèle.
La création d'un clone du modèle (une "instance de la classe") devient un jeu d'enfant. Il suffit d'appeler le "constructeur" et de passer des paramètres, par exemple : personne1 = new Personnage("Dubois","Julien","M")
Testez le script !

Lorsque vous écrivez, par exemple : var cejour = new Date() vous appelez le constructeur Date qui est un constructeur natif (ou classe native d'objets de javaScript).
Retour menu