javascript

La programmation Orientée Objet en JavaScript

Temps de lecture: 4 minutes

La programmation orientée objet est un style de programmation populaire qui a pris racine en JavaScript depuis le début.

Il est si profondément enraciné dans JavaScript que de nombreuses fonctions et méthodes natives de JavaScript sont écrites dans le style orienté objet. vous trouverez également de nombreuses bibliothèques populaires écrites dans le style orienté objet.

Si vous avez déjà une expérience de la programmation orientée objet dans un autre langage, mettez de côté les connaissances que vous avez et parcourez l’intégralité de l’article avec l’esprit d’un débutant.

En effet, la programmation orientée objet en JavaScript est très différente de la programmation orientée objet des autres langages. Si vous vous en tenez à vos idées actuelles, vous risquez de trouver la programmation JavaScript orientée objet plus difficile qu’elle ne l’est.

Maintenant, commençons par chercher en quoi consiste la programmation orientée objet.

La programmation orientée objet concerne deux choses:

  1. Création d’objets individuels à partir d’un objet commun
  2. Héritage

Pour cet article, nous ne couvrirons que la première partie. Nous examinerons l’héritage dans un autre article.

Création d’objets à partir d’un objet commun

Vous savez que les objets en JavaScript ont des propriétés et des méthodes. Ces objets peuvent ressembler à des choses de la vie réelle (même des personnes!).

Disons que vous essayez de construire un objet Humain en JavaScript. Un être humain a prenomnomet un age. Vous pouvez ajouter ces attributs en tant que propriétés en JavaScript.

En plus d’avoir des noms et des âges, les humains peuvent aussi dire leur nom. Vous pouvez également écrire une fonction direNom en tant que méthode dans l’objet humain.

Étant donné que les humains sont très semblables les uns aux autres, vous pouvez également créer un autre objet humain avec les mêmes propriétés ( prenomnomage) et méthodes ( direNom).

Malheureusement, vous ne pouvez plus l’appeler humaincar la variable humainest utilisée.

En supposant que vous connaissiez Vincy, c’est un peu bizarre de l’appeler human2, non? Vous l’appellerez probablement Vincy à la place.

Ainsi, au lieu de nommer nos objets humains humainet humain2, il est plus logique de les appeler Davidet Vincy.

Là c’est beaucoup mieux.

Maintenant, si vous avez besoin de créer un autre humain? Vous devrez écrire l’objet entier à partir de zéro, mais c’est une corvée, non? Vous copiez tellement de code!

À ce stade, vous remarquerez que les humains sont légèrement différents les uns des autres – nous avons des noms différents et nous avons des âges différents.

Mais nous avons un point commun: nous pouvons dire notre nom.

Ce serait cool si vous pouviez créer une fonction (ou quelque chose de similaire) qui rend chaque individu unique, non?

Il s’avère que vous le pouvez! Tout ce que vous avez à faire est de
créer une fonction avec un mot clé this et de créer des personnes avec un
mot clé. new

Voici à quoi ça ressemble:

Si vous faites console.log(zell), vous verrez qu’il est un humain avec un prenom, un nom, un ageet il a la capacité de dire son nom avec direNom.

L’homme créé a les propriétés prenom, nom et age. Il a également une méthode direNom.

À partir de ce moment, vous pouvez créer autant de personnes que vous le souhaitez avec la même syntaxe. Chaque personne que vous créez conservera son individualité et pourra dire son nom!

Cool, n’est ce pas?

Et c’est en un mot la construction d’objets de la programmation orientée objet: vous construisez une fonction ( Humainqui peut créer des instances (comme zell, par exemple , vincyet nicolas). Chaque instance que vous créez doit pouvoir contenir des données individuelles différentes des autres instances.

La fonction que vous utilisez pour construire des instances s’appelle le constructeur .

Nommer des constructeurs et des instances

Dans la programmation orientée objet, la première lettre du constructeur est en majuscule ( Humain), alors que chaque instance est écrit comme une variable normale ( zellvincynicolas).

Cette petite différenciation vous montre instantanément la différence entre les constructeurs et les instances de votre code.

C’est quoi « this » ?

thisest un mot clé en JavaScript. Lorsqu’il est utilisé dans un constructeur, il fait référence à l’instance créée avec le constructeur.

Si vous essayez console.log(this)dans un constructeur, vous remarquerez que c’est la même chose que de consigner l’instance elle-même.

this dans un constructeur pointe sur l’instance

thisest un concept très important dans la programmation orientée objet. Donc, vous devez vous familiariser avec cela. Voici un article qui explique thisen détail.

En résumé

L’une des parties principales de la programmation orientée objet concerne la création d’instances à partir de constructeurs . Chaque instance que vous créez doit conserver son individualité, elles sont donc différentes des autres instances.

Lorsque vous créez un constructeur, vous devez mettre la première lettre de son nom (comme Humain) en majuscule pour le différencier des instances (comme zell).

Si vous avez aimé cet article, vous aimeriez apprendre JavaScript – un cours qui vous aide à apprendre à créer de vrais composants à partir de zéro avec Javascript.

Deviens toi aussi développeur web !
I agree to have my personal information transfered to MailChimp ( more information )
Commences ta carrière de développeur web, GRATUITEMENT, ici et maintenant !
Je hais les sapms. Votre adresse email ne sera jamais vendu ou partagé avec un tiers
Partages à tous tes amis !

Laisser un commentaire

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