Apprendre Javascript pour rendre vos pages Web interactives
Page 31: Objets personnalisés en Javascript
Toutes les pages 
Apprendre Javascript pour rendre vos pages Web interactives
Page 31
Objets personnalisés en Javascript
Objets personnalisés en Javascript
Créer des objets personnalisés en Javascript
L'objet en Javascript, une entité toujours présente
Durant ce cours, nous n'avons guère cessé d'invoquer des objets, comme l’objet window, l’objet document, l’objet array etc… et même certains types primitifs (comme les nombres ou les chaines de caractères) peuvent être appréhendés en tant qu’objet à certains égards. En effet, le langage Javascript s’articule autour des objets et la plupart de ces objets-là sont natifs au langage et sont créés à partir de prototypes prédéfinis. Cependant, à partir de l’implémentation ECMAScript 2015 (ou ES6), il est possible de créer les objets de manière personnalisée.Pour créer un objet personnalisé, il existe plusieurs façons de faire à savoir :
- La syntaxe littérale
- L’invocation du constructeur Object
- L’utilisation de la fonction constructeur
- L’instanciation de classe personnalisée
Dans cette leçon, nos allons traiter les trois premières méthodes de création d'objets personnalisées. Quant-à la méthode des classes, elle sera le sujet de la leçon qui suivra et qui est consacrée aux classes et héritage.
Créer les objets avec la syntaxe littérale
La syntaxe littérale consiste à créer un objet directement en le dotant de ses propres attributs et méthodes. Les attributs peuvent être de n'importe quel type (primitif ou non), c'est à dire qu'un objet peut contenir un attribut qui, lui-même, est un objet.Créons un objet nommé Utilisateur et qui renferme les attributs pseudo, password et droits ainsi que les méthodes changerPass(nouveau) qui accueille un argument nommé nouveau et qui permet de changer le mot de passe. Le code ressemblera à ceci:
Utilisateur={
pseudo:"skilled_user",
pass:"abc123",
droits:["r","w"],
changerPass(nouveau){
this.pass=nouveau;
}
}
pseudo:"skilled_user",
pass:"abc123",
droits:["r","w"],
changerPass(nouveau){
this.pass=nouveau;
}
}
Notez que le code ci-dessus sert d'exemple est n'est en aucun cas destiné à un usage pratique en raison de l'apparition du mot de passe en claire, ce qui est contraire aux bonnes pratiques liées à la sécurité. Pour d'amples infos à ce sujet, rendez-vous sur cette leçon sur les vulnérabilités liées à l'usage des mots de passe.
L'objet créé avec la syntaxe littérale est délimité par des accolades. Les attributs (nommés aussi des clés) peuvent (au choix) être placés entre des délimiteurs de chaînes de caractères (simples quotes ou doubles quotes). Pour spécifier la valeur de l'attribut on place deux points avant. Pour séparer les membres (attributs ou méthodes) on utilise une virgule.
Pour accéder à un membre de l'objet, on saisit le nom de ce dernier suivit d'un point puis le nom du membre. Par exemple:
console.log(Utilisateur.pseudo);
// Affiche: skilled_user
console.log(Utilisateur.droits[0]);
// Affiche: r
Utilisateur.changerPass("azerty");
console.log(Utilisateur.pass);
// Affiche: azerty
Notez que les méthodes (fonctions d'un objet) ne nécessitent pas de clé. Il suffit de les déclarer directement comme on le faisait pour une fonction nommée classique. Néanmoins, on peut utiliser la clé comme ceci:
// Affiche: skilled_user
console.log(Utilisateur.droits[0]);
// Affiche: r
Utilisateur.changerPass("azerty");
console.log(Utilisateur.pass);
// Affiche: azerty
Utilisateur{
pseudo:"skilled_user",
pass:"abc123",
droits:["r","w"],
changerPass:function(nouveau){
this.pass=nouveau;
}
}
Dans ce cas, on crée une fonction anonyme que l'on affecte à la variable changerPass qui devient une fonction qui accueille l'argument nouveau.
pseudo:"skilled_user",
pass:"abc123",
droits:["r","w"],
changerPass:function(nouveau){
this.pass=nouveau;
}
}
Notez que l'on peut préfixer la déclaration de l'objet par les mots-clés var ou let afin de gérer leur portée s'il sont déclarées respectivement dans une fonction ou dans un bloc d'instruction (conditions, boucles...). Le mot-clé const par contre n'est pas recommandé car on pourrait toujours modifier la valeur des attributs.
Constructeur Object
On peut également créer des objets personnalisés en instanciant le constructeur Object de la manière suivante:Utilisateur=new Object();
A ce stade, on dispose d'un objet nommée Utilisateur mais qui ne dispose d'aucun attribut, ni méthode personnalisé.
A la création d'un objet, Javascript dote ce dernier de certaines méthodes par défaut, comme la méthode valueOf() qui convertit l'objet en valeur primitive ou la méthode toString() qui sert d'usage interne du moteur Javascript pour afficher l'objet en tant que chaîne de caractère en cas de besoin.
On peut désormais créer les attributs de l'objet à la volée et les initialiser avec les valeurs souhaitées. On peut également créer les méthodes afin de les appeler plus tard.
Utilisateur=new Object();
Utilisateur.pseudo="skilled_user";
Utilisateur.pass="abc123";
Utilisateur.droits=["r","w"];
Utilisateur.changerPass=function(nouveau){
this.pass=nouveau;
}
Utilisateur.pseudo="skilled_user";
Utilisateur.pass="abc123";
Utilisateur.droits=["r","w"];
Utilisateur.changerPass=function(nouveau){
this.pass=nouveau;
}
Afin d'éviter les erreurs de type SyntaxError, il est recommandé de déclarer les méthodes à l'aide de fonctions anonymes et non pas directement comme pour le premier exemple.
Fonction constructeur
Une fonction constructeur est une fonction que l'on peut instancier et qui englobe des attributs et des méthodes. On peut également se servir du mot-clé this au sein de la fonction constructeur pour faire référence à son instance.myFunc=function(){
this.pseudo="skilled_user";
this.pass="abc123";
this.droits=["r","w"];
this.changerPass=function(nouveau){
this.pass=nouveau;
}
}
//Instanciation de la fonction constructeur
Utilisateur=new myFunc();
this.pseudo="skilled_user";
this.pass="abc123";
this.droits=["r","w"];
this.changerPass=function(nouveau){
this.pass=nouveau;
}
}
//Instanciation de la fonction constructeur
Utilisateur=new myFunc();
Quelle méthode est la meilleure?
Les trois méthodes vues dans cette leçons se valent. En effet, on peut faire la même chose que ce soit à l'aide d'un objet littéral, le constructeur Object ou la fonction constructeur. Cependant, la syntaxe littérale est souvent la plus utilisée pour créer un objet à la volée. D'ailleurs, c'est cette même syntaxe qui est utilisée par le format de données JSON (JavaScript Object Notation) largement utilisé pour représenter les données structurées.La quatrième méthode, et qui consiste à créer des classes que l'on instancie pour donner naissance à des objets, constitue une autre méthode très appréciée par les développeurs habitués à la programmation orientée objet dans d'autres langages de programmation comme C++, Java ou PHP...
Objet littéral, constructeur Object et fonction constructeur en vidéo
Page 31
Objets personnalisés en Javascript
Objets personnalisés en Javascript
