Introduction au JavaScript orienté objet

Pour une raison quelconque, l’industrie informatique a tendance à penser que, si vous n’utilisez pas de méthodes de programmation orientée objet (OOP), vous n’êtes pas un «vrai programmeur». C’est en fait une position quelque peu idiote, car il existe de nombreuses situations où la POO n’est pas le moyen le plus approprié de traiter un problème. C'est la faille dans des langages comme Java qui oblige la POO dans toutes les tâches de programmation, que vous en ayez besoin ou non.

JavaScript (qui n'a presque rien à voir avec Java) est un langage tout à fait différent. Il offre une liberté et une polyvalence presque illimitées, avec une complexité réduite dans la plupart des domaines. Malheureusement, certaines choses sont plus compliquées en JavaScript à cause de la liberté qu’il essaie de vous donner.

Pourquoi la programmation orientée objet ne convient-elle pas toujours à toutes les tâches, c'est que cela ajoute à la complexité du programme et implique souvent des étapes supplémentaires, plus de travail et davantage de problèmes pouvant survenir si vous ne faites pas attention. Mais la programmation orientée objet peut également présenter de nombreux avantages si elle est utilisée dans des situations où elle est appropriée.

L’avantage le plus important que OOP puisse nous offrir est la réplication, ce qui signifie que nous pouvons cloner un objet et le réutiliser plusieurs fois dans le même programme, chaque fois que nous en avons besoin. La complexité implicite, et le fait que JavaScript n'est pas conçu dès le départ pour être un langage POO (ce qui ajoute davantage de complexité), sont l'une des raisons pour lesquelles OOP représente la dernière frontière pour de nombreux programmeurs JavaScript débutants avant qu'ils ne gagnent leurs ailes.

OK, c'est dur, mais ce n'est pas si difficile

Avant de commencer à penser que le concept de JavaScript orienté objet est trop pour vous, considérez que vous utilisez déjà la POO, même si vous ne le connaissez pas. Les puristes peuvent ne pas être d'accord, mais je pense qu'il est juste de dire que si vous utilisez déjà HTML et CSS, et que vous utilisez parfois JavaScript pour manipuler des éléments HTML sur une page Web, vous êtes déjà un programmeur POO expérimenté.

Chaque élément HTML d’une page Web est en réalité un objet. Ils entrent tous dans la hiérarchie DOM (Document Object Model), ce qui signifie qu'ils ont une classe définie, des propriétés définies et un héritage défini. Sauf si vous définissez explicitement une valeur de propriété, tous les objets utiliseront leurs valeurs de propriété par défaut. Lorsque vous écrivez une instruction CSS, vous utilisez réellement une méthode pour modifier une ou plusieurs valeurs de propriété d'une classe.

Chaque fois que vous écrivez une instruction HTML, vous créez une nouvelle instance d'une classe. Et comme vous le savez sûrement déjà, vous pouvez créer vos propres classes en fonction de la classe prédéfinie de chaque type d'objet (par exemple, vous pouvez créer <h2 class = "subheading">, dont les propriétés peuvent être très différentes de celles de la classe d'origine. il a été créé à partir de). Vous pouvez spécifier que les objets H2 de cette classe auront une couleur et une taille différentes de celles des objets H2 standard. Et vous pouvez réutiliser ces objets modifiés aussi souvent que vous le souhaitez. L'objet H2 d'origine est un modèle d'objet et votre nouvelle classe est dérivée de la classe de modèle.

Alors oui, la POO n'est pas facile, mais vous le faites probablement déjà, alors de quoi craindre?

Le niveau suivant: créer vos propres objets

Travailler avec des objets DOM intégrés est trop facile. Vous avez besoin de plus de défis. Faire vos propres objets est la première étape vers un niveau supérieur de POO.

Avec tout ce préambule, vous vous attendez probablement à ce que la création d'un objet soit une grosse affaire nécessitant beaucoup de code complexe. Si vous avez déjà essayé de créer des classes d'objets personnalisées dans un langage tel que Java ou C #, vous vous attendez à créer un constructeur de classe volumineux. Voici comment nous le faisons en JavaScript:

C'était anti-climatique, hein? Nous avons créé un objet vide de la classe “myObject”. De toute évidence, les objets vides sont ennuyeux, car ils ne font rien sauf occuper de l'espace en mémoire. Pour être utile, un objet doit avoir un contenu. Considérons un cours plus pratique:

Ce qui précède montre un objet appelé objAlien qui possède toutes ces propriétés (variables ordinaires) et méthodes (fonction) définies dans celui-ci. Techniquement, vous pouvez également considérer un objet comme un tableau de variables et / ou de fonctions.

Utiliser des objets dans un programme

Une fois qu'un objet a été défini, vous pouvez le référencer dans vos programmes. Dans un jeu, vous auriez plusieurs extraterrestres, mais écrire du code pour chaque étranger rendrait le programme trop lourd. Un meilleur moyen consiste à créer un tableau pour stocker tous les extraterrestres, puis à utiliser la classe alien pour créer de nouveaux extraterrestres. Par exemple:

Ce code ferait en sorte que les extraterrestres verts visqueux de 20 les placent en pixels 110 (nous pouvons donc en déduire que l'image utilisée pour stocker l'extraterrestre a une largeur 100px large et qu'il existe une marge 10px entre chaque extraterrestre). Évidemment, bien sûr, ce n'est pas un bon moyen d'implémenter un jeu en JavaScript car il existe de meilleures techniques, mais cet article ne traite pas de la création de jeux, mais de la création et de l'utilisation d'objets.

Les objets ne doivent pas toujours être ajoutés à l'aide du nouveau mot clé. Voici un exemple de code d'un projet dans lequel un objet définit ses propres propriétés en utilisant les valeurs d'un autre objet:

Nous pouvons voir ici une manière très complexe d'utiliser un objet, où les valeurs de l'objet sont transmises à la propriété attr de l'objet R. Si vous connaissez JSON (JavaScript Object Notation), vous pouvez penser que la première partie de l'exemple utilise JSON avec des erreurs de syntaxe, mais en réalité, ce n'est pas du code JSON.

La raison pour laquelle les noms de variable, à l'exception de remplissage, sont cités est d'empêcher JavaScript de traiter l'opérateur moins dans les noms de variable (qui sont des propriétés CSS). Depuis que ce programme a été écrit, des modifications ont été apportées pour permettre aux propriétés CSS telles que font-family d'être écrites sous la forme fontFamily, mais ce code hérité n'a pas été adapté pour tirer parti de cette modification.

Pourquoi utiliser des objets?

Les objets conviennent mieux aux situations dans lesquelles vous devez créer plusieurs instances de quelque chose ou pour trouver un moyen simple de regrouper des données liées à quelque chose d'un type particulier. Dans l'exemple de jeu ci-dessus, nous pouvons voir qu'il était possible de créer plusieurs copies de l'objet objAlien, mais nous pourrions également manipuler les propriétés de l'objet après l'avoir ajouté, qui dans le cas de l'exemple était la propriété x.

Quand ne pas utiliser d'objets?

Vous ne devriez pas utiliser d'objets si votre projet n'en a pas vraiment besoin. Il est inutile de trop compliquer vos programmes sans une bonne raison. Si votre programme est conçu pour faire quelque chose de simple, les techniques de POO ne devraient pas être nécessaires.

Pourquoi les objets JavaScript sont plus faciles à créer que les objets dans d'autres langages POO

Dans des langages tels que Java et même Visual Basic, la création d'objets est une tâche ardue. En effet, vous devez créer un modèle de classe (ou utiliser un modèle existant) sur lequel baser votre objet avant de pouvoir le définir. Cela n'est pas nécessaire en JavaScript car une technique de construction simple nous est donnée (objectname = {…}). Les objets en JavaScript peuvent également inclure tout type de variable, y compris les tableaux, et les déclarations de type sont inexistantes. Les valeurs de retour sont facultatives.

Que ce soit une bonne ou une mauvaise chose fait l’objet d’un débat, mais les programmes JavaScript n’échoueront pas non plus si vous essayez d’appeler une valeur de propriété qui n’existe pas. Par exemple, si vous avez tapé:

Vous vous attendez à juste titre à ce que la ligne de code ci-dessus mette 5 dans l'élément portant l'ID "par1". Mais si vous deviez taper quelque chose comme:

Vous ne verriez pas la saveur préférée de l'extraterrestre, vous verriez des indéfinis apparaître dans par1. Pour la plupart des applications, cela ne poserait pas de problème, mais ce serait le cas pour certains. Dans ces cas, vous devez être préparé à cela et écrire un code qui teste les valeurs valides avant de les utiliser.

Une façon de tester ceci est:

Cette réponse est un peu extrême, mais vous voyez l'idée. Notez que nous testons “! ==” et non “! =”, Ce qui est une chose facile à confondre. Voici une autre façon de le faire:

Même chose, de manière différente. Vous pouvez également ajouter des propriétés aux objets après les avoir créés. Vous pouvez le faire de cette façon:

Bien entendu, vous pouvez également modifier les valeurs des propriétés de la même manière. Pour supprimer la propriété favoriteFlavor de l'objet, procédez comme suit:

Il y a très peu de situations où cela serait jamais nécessaire.

Rendre les objets plus réutilisables

Vous avez probablement remarqué le plus gros problème potentiel lié à la création d'objets: si vous voulez avoir différents types d'extraterrestres, vous devez transformer la propriété objAlien.type en tableau. Mais il y a un autre moyen, qui est meilleur.

Cette technique s'appelle le prototypage d'objet, ce qui signifie que vous créez un modèle de base pour l'objet mais que vous ne complétez pas tous les détails. Ici aussi, nous nous rapprochons du véritable moyen d’ajouter des objets à un jeu.

Vous pouvez voir maintenant que les méthodes de l'objet sont définies, mais la plupart des propriétés ne sont pas définies. De plus, au lieu d'être une simple variable, la déclaration d'objet est maintenant encapsulée dans une fonction, car elle n'est pas encore un objet. C'est juste un prototype d'objet, décrivant comment créer l'objet sans le créer.

Alors maintenant, pour créer des objets basés sur le prototype, nous pourrions faire ceci:

C'est pareil que faire ceci:

Parce que nous avons créé un prototype, nous n’avons pas besoin de le faire de la deuxième manière, et il est beaucoup plus facile de déclarer différents types d’étrangers avec des vitesses, un nombre d’armes et un nombre de positions différents.

Et ensuite?

Cet article était une introduction à JavaScript orienté objet, qui, espérons-le, a permis de démystifier le sujet et de le rendre moins intimidant. Nous avons abordé toutes les bases, y compris comment créer des objets simples, comment ajouter, supprimer et modifier des propriétés, comment déclarer et utiliser des méthodes et comment utiliser le prototypage pour faciliter la réutilisation des objets. Mais il reste encore beaucoup à apprendre. Maintenant que vous avez un bon point de départ, vous pourrez aborder n'importe quel tutoriel ou leçon sur la PO plus avancée en toute confiance.

Bogdan Rancea

Bogdan est un membre fondateur d’Inspired Mag, ayant accumulé près de 14 années d’expérience 6 au cours de cette période. Dans ses temps libres, il aime étudier la musique classique et explorer les arts visuels. Il est également obsédé par les fixies. Il possède déjà 5.