Trois façons simples de créer un objet en JavaScript

Vous ne pouvez aller loin en tant que développeur web sans connaître les principales façons de créer des objets en JavaScript. Aujourd’hui, nous allons présenter les trois façons les plus courantes de créer un objet en JavaScript : au moyen de la notation littérale, au moyen d’une fonction Factory et au moyen d’une fonction Constructeur.

Objets créés au moyen de la notation littérale

Un objet en JavaScript est essentiellement une collection de propriétés-valeurs. On peut en créer grâce à la notation littérale. Supposons que l’on veut créer un objet tarte et l’inscrire à un concours de tartes. On aurait

Création d'un objet JavaScript avec la notation littérale

Dans cet exemple, uneTarte est le nom de l’objet créé. C’est la tarte que l’on veut inscrire au concours. Elle est composée de deux propriétés-valeurs. La première propriété-valeur correspond au numéro d’inscription de la tarte et, la deuxième, à la méthode pour inscrire la tarte. On effectue l’inscription en appelant la méthode inscrire() au moyen de la notation point.

Pour créer une autre tarte avec la notation littérale, nous devons répéter ce code, ce qui nous oblige à répéter la définition de la méthode inscrire(). Or, comme vous le savez, le code dupliqué est difficile à maintenir. Aussi, dès que l’objet à créer a une méthode (dès que l’objet à créer a un comportement), on utilise d’autres façons de le créer.

Si cela vous aide à vous figurer les choses, vous pouvez vous dire que, grâce à la notation littérale, les objets peuvent être créés en listant simplement leurs composants.

Objets créés au moyen d’une fonction Factory

On peut créer des objets avec une fonction Factory. Les fonctions Factory sont des fonctions qui produisent des objets à la demande. Reprenons notre exemple précédent. Nous pouvons définir une fonction Factory comme suit :

Notez que notre fonction Factory retourne ici l’objet littéral de notre exemple précédent.
Une fonction Factory est appelée comme une fonction ordinaire. Nous pouvons attribuer des paramètres à notre fonction Factory. Si la propriété et le paramètre portent le même nom, il n’est pas nécessaire d’effectuer l’assignation propriété-valeur explicitement.

Il est important de noter que nous n’avons pas à préfixer le nom des fonctions Factory avec un verbe d’action comme créer, mais cela peut rendre l’intention du développeur plus claire.

Objets créés au moyen d’une fonction Constructeur

JavaScript peut prêter à confusion lorsqu’on est habitué à travailler avec des langages «?à classes?» comme le sont Java ou C++. JavaScript n’a pas de classes (le mot-clé class a néanmoins été ajouté avec ES2015, mais JavaScript continue de reposer sur l’héritage prototypique).

En JavaScript, la création d’objets se passe en deux étapes, de la façon suivante :

  • On définit une fonction Constructeur, qui, à la place de retourner un objet, attribue des valeurs aux propriétés de this.
  • On crée ensuite une instance de l’objet avec l’opérateur new.

Par convention, le nom des fonctions Constructeurs commence par une majuscule et ne porte pas de verbe d’action. Dans notre exemple, le nom de la fonction Constructeur est réduit à Tarte.

This est la référence à l’objet qui exécute le monceau de code. On l’utilise pour affecter des valeurs aux propriétés d’un objet en fonction des valeurs passées en paramètres. Grâce à ce constructeur, on peut créer autant de tartes qu’on le désire.

Si cela vous aide à vous figurer les choses, vous pouvez vous dire, qu’en JavaScript, un constructeur est juste une fonction que l’on invoque avec l’opérateur .

Un mot sur new

L’appel à new engendre, d’une part, un appel à la méthode call et, d’autre part, la création d’un objet interne vide qui est passé comme premier argument à cette dernière. Ainsi,

unAutreTarte = new Tarte(1);

devient

unAutreTarte.call({}, 1);

L’objet interne vide est le this en question.

De plus, les objets créés avec la notation littérale sont créés de la même façon qu’avec new Object(). Les objets créés à partir d’une expression littérale seront des instances d’Object.

Propriété constructor

Chaque objet a une propriété constructor. Il s’agit de la fonction qui a été utilisée pour construire l’objet. Ainsi, on a pour la tarte créée avec la notation littérale :

Propriété constructor, notation littérale.

Pour la tarte créée avec la fonction Factory :

Et pour la tarte créée avec la fonction Constructeur :

Fonction Factory ou Constructeur, laquelle choisir??

Certaines personnes préfèrent utiliser les fonctions Factory plutôt que les fonctions Constructeur, car elles préfèrent éviter d’avoir à manipuler new et this. Les fonctions Factory permettent de modéliser des données complexes et asynchrones qui ont une capacité naturelle de composition, sans nous forcer à atteindre des abstractions de haut niveau. En effet, la définition d’une fonction Factory en termes d’autres fonctions Factory nous aide à diviser des fonctions Factory complexes en fragments plus petits. Les objets qui peuvent être exprimés en termes de relations «?a?», plutôt qu’en termes de relation «?est?» peuvent être implémentés naturellement par la composition. Par exemple, nous pouvons créer une fonction Factory creerTarteAuCitron() en termes des fonctions Factory creerCroute(), creerGarnitureAuCitron() et creerMeringue().

Conclusion

Les projets JavaScript ont tendance à devenir difficiles à tester et à remanier en raison des couches complexes d’abstraction que nous sommes souvent encouragés à construire. Les fonctions Factory nous encouragent à modéliser des données complexes et asynchrones avec des primitives qui ont une capacité naturelle de composition. Quand c’est possible, il faut s’en tenir à la simplicité?!

(4)

Un commentaire? On vous écoute.

Ce site utilise Akismet pour réduire le pourriel. En savoir plus sur comment les données de vos commentaires sont utilisées.