Javascript possède des objets comme les objets string, date, math etc., Toutefois ce langage permet de construire soi-même ses propres objets. Pour imager ses possibilités nous allons créer l'objet Vehicule.
Il y a deux façons de créer un objet :
La façon littérale lorsqu'on n'a besoin que d'une seule instance de l'objet.
En utilisant une fonction constructrice et par instanciation.
La création se fait en deux étapes :
Définition du type d'objet en écrivant une fonction.
Puis la création des instances de l'objet avec new (1).
Note (1) : L'opérateur new permet de créer une instance d'un certain type d'objet à partir du constructeur qui existe pour celui-ci (natif ou défini par l'utilisateur).
Créer un objet personnalisé
La manière la plus pratique et la plus évolutive pour créer un objet personnalisé est celle qui nous permettra de l'instancier, c'est à dire de donner une vie propre et une existence réelle à un objet particulier à partir du modèle de l'objet créé.
Création du modèle d'objet Vehicule que nous appellerons le plus simplement du monde "Vehicule".
Nous allons tout d'abord créer une fonction
function Vehicules () {
}
attention !, sans accent, sans espace et sans caractère spécial
Dans cette fonction nous allons définir les propriétés que nous désirons exploiter, comme par exemple :
Type
Puissance
Couleur
Propriétaire
Resumé
Note1 : Tous les paramètres qui vont servir à créer les propriétés correspondantes sont passés en paramètres à la fonction de création d'objets "Vehicules".
Note2 : "this" (en minuscules) représente la fonction elle même, c'est à dire "Vehicules()". C'est un raccourcis commode qu'il faut utiliser avec prudence. Le fait d'écrire this.Type, signifie que l'on attribue à la fonction elle même (plus tard aux objets créés avec cette fonction) la propriété Type.
Créer des instances de l'objet personnalisé
Généralités
Déclarer une instance de "Vehicules", signifie créer par exemple l'objet personnalisé "MaRenault". On dira que "MaRenault" est une instance de "Vehicules". On peut aussi créer par exemple une autre instance de "Vehicules " que l'on appellerait "MaPeugeot".
var MaRenault= new Vehicules( "Mégane", 110, "Noire", "Lucien");
var MaPeugeot= new Vehicules( "307HDI", 90, "Blanche", "Maxime");
Dorénavant, MaRenault ou MaPeugeot deviennent des instances de l'objet Vehicules. Les objets personnalisés MaRenault ou MaPeugeot existent maintenant en tant qu'objets personnalisés à part entière. De fait, nous pourrons désormais faire appel à eux et à leurs propriétés pour en voir le contenu.
Manipulation des objets
resultat = MaRenault.Type donnera Mégane
resultat = MaRenault.Couleur donnera Noire
resultat = MaPeugeot.Couleur donnera Blanche
resultat = MaPeugeot.Proprietaire donnera Maxime
Créer de méthodes
On peut définir des fonctions à l'intérieur de fonctions et cela fournit des méthodes aux objets.
resultat = MaRenault.Prix(15) donnera 16500 € avec une TVA à 15%
resultat = MaPeugeot.Prix(15) donnera 13500 € avec une TVA à 15%
Note1 seul l'objet Vehicules peut exécuter la méthode Prix. Du coup, si la méthode Prix fait partie d'un autre script, il n'y aura pas d'interaction.
Définir des propriétés étant elles-même d'autres objets
Dans l'exemple général nous avons défini dans l'objet une propriété "Proprietaire". Dans ce cas il s'agit d'une chaine de caractère correspondant au nom du propriétaire.
Imaginons maintenant que l'on ait défini un autre objet appelé "Personnes" de la manière suivante :
Instanciée de la façon suivante :
Les instanciations de l'objet "Vehicules" deviendront :
Et la manipulation des objets liés au propriétaire donnera :
Résultat : Plutôt que de passer une chaîne littérale ou une valeur entière lors de la création des nouveaux objets, les instructions ci-dessus utilisent les objets Personne1 et Personne2 comme paramètres pour les propriétaires. Ceci permet plus de richesse d'information, une bonne visibilité du code, une évolution et une maintenance plus facile.
Créer des Prototypes
Ce concept vient étendre les possibilités du modèle objet de
Javascript, en permettant de se rapprocher encore plus de la notion
de classe, mais d'une manière un peu particulière. Un prototype
s'ajoute en tant que propriété d'une fonction de constructions
d'objets. Ainsi la fonction de construction ne sert plus que de
constructeur d'objet alors que son prototype prend en charge la
partie définition du comportement (des méthodes).
Cette possibilité permet d'ajouter des propriétés personnalisées à l'objet.
Note(1) : le prototype hérite des propriétés de son constructeur. Ainsi ces propriétés peuvent être accédées via l'objet prototype.
Utilisation du prototype
Avantages liés à l'utilisation de prototypes
Au lieu de faire un prototype comme ci-dessus on aurait put inclure toutes les méthodes dans l'objet lui-même et le résultat aurait été identique.
Toutefois ce choix entraine :
Une augmentation de la taille mémoire surtout si l'on a un nombre d'instances trés important : l'objet complet est dupliqué à chaque nouvelle instance
Un temps d'exécution rallongé.
Une évolutivité plus confuse, une maintenance plus délicate.
Pour toutes ces raisons et certainement d'autres utilisez de préférence les prototypes : les propriétés dans les objets, les méthodes dans les prototypes.
Ajouter des méthodes aux objets natifs
De base les objets natifs possèdent un objet prototype associé et autorisant ainsi l'ajout de méthodes propriétaires.
Ajout de méthodes
Cela peut être trés interessant : supposons que vous vouliez manipuler des chaînes de caractères et qu'aucune méthode proposée par l'objet natif "string" ne vous apporte satisfaction pour un usage particulier, et vous voulez par souci d'homogénéité de votre code travailler à partir de l'objet "string". Alors comme la notion de prototype vous le permet (les objets natifs possèdent eux aussi un objet prototype autorisant donc la modification de leurs méthodes) vous allez créer votre propre méthode.
Exemple : on veut une méthode qui retourne une chaine de caractères inverse par rapport à la chaine source : ça ne sert pas à grand chose mais ça permet de voir la démarche.
Remarques
On utilise le type natif Object et son sous-objet prototype pour lui ajouter la méthode inverse.
if (i !== 'inverse') pour ne pas afficher le contenu lui-même de la fonction prototype.
this fait référence à l'objet maChaine.
Remplacer des méthodes
Attention : Même si cette possibilité est possible, elle est à manipuler avec précaution car cela peut perturber d'autres scripts utilisant l'objet natif en question.
Application au projet de site web
Le but de l'exercice est de créer un objet javascript qui puise
nous renvoyer des informations lorsque l'on cliquera sur un produit
floral. Le renvoi se fera dans une petite fenêtre (div) qui sera
crée dynamiquement lorsque l'on
survolera le produit. Les informations renvoyées concerneront les
dimensions, le prix, le coût d'expédition et les délais de
disponibilité.
