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 vos 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és 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

Les variables en JavaScript peuvent stocker soit des valeurs primitives(une chaine, un nombre, un booléen) ou un objet.
Ici les variables stylo1 & stylo2 stockent chacune plusieurs propriétés. Ce sont des variables objet.
Une variable objet c'est en fait un tableau associatif avec des paires clé/valeur (une paire par propriétés de l'objet).

Pour afficher la valeur d'une propriété de l'objet il faut utiliser la syntaxe : objet.propriété.


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 une objet ce dernier doit comprendre aussi des méthodes !
Une méthode est une fonction propre à l'objet.

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("Ma voiture : " + mavoiture.presenter()); // changement propriétés mavoiture.marque ="Porsche" ; mavoiture.modele ="Panamera"; mavoiture.puissance ="330CV" ; alert("La voiture dont je rêve : " + 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(). Il s'agit d'une fonction propre à l'objet qui affiche ici toutes les propriétés de l'objet.

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 en fait 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.

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() { this.saluer =function() { var civilite ; if (this.sexe =="M") civilite = "Monsieur" ; else civilite ="Madame"; return civilite ; } } } // 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 (ou instances de la classe "Personnage") 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 ( ou 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 !
Retour menu