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:
- Création d’objets individuels à partir d’un objet commun
- Héritage
Pour cet article, nous ne couvrirons que la première partie. Nous examinerons l’héritage dans un autre article.
Sommaire
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 prenom
, nomet 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
.
1 2 3 4 5 6 7 8 9 10 |
const humain = { prenom: 'David' nom: 'Yao', age: 29, direNom () { console.log(`Je suis David Yao`) } } human.direNom() // Je suis David Yao |
É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 ( prenom
, nom
, age
) et méthodes ( direNom
).
Malheureusement, vous ne pouvez plus l’appeler humain
car la variable humain
est utilisée.
1 2 3 4 5 6 7 8 |
const humain2 = { prenom: 'Vincy', nom: 'Zhang', age: 28, direNom () { console.log(`Je suis Vincy Zhang`) } } |
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 humain
et humain2
, il est plus logique de les appeler David
et Vincy
.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const David = { prenom: 'David' nom: 'Yao', age: 29, direNom () { console.log(`Je suis David Yao`) } } const Vincy = { prenom: 'Vincy', nom: 'Zhang', age: 28, direNom () { console.log(`Je suis Vincy Zhang`) } } |
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!
1 2 3 4 5 6 7 8 9 |
// Pff, créer un nouveau humain en écrivant un nouvel objet const Nicolas = { prenom: 'Nicolas', nom: 'Tze', age: 30, sayName () { console.log(`Je suis Nicolas Tze`) } } |
À 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:
1 2 3 4 5 6 7 8 9 10 |
function Humain (prenom, nom, age) { // Note: Ne vous inquiétez pas à propos de 'this'. Vous comprendrez plus tard. this.prenom= prenom this.nom= nom this.age = age this.sayName = function () { console.log(`Je suis ${prenom} ${nom}`) } } |
1 2 |
// Créer une nouvelle personne avec le mot clé `new` const zell = new Humain('Zell', 'Liew', 29) |
Si vous faites console.log(zell)
, vous verrez qu’il est un humain avec un prenom
, un nom
, un age
et 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!
1 2 3 4 5 |
const vincy = new Humain('Vincy', 'Zhang', 28) const nicolas = new Humain('Nicolas', 'Tze', 30) vincy.sayName() // Je suis Vincy Zhang nicolas.sayName() // Je suis Nicolas Tze |
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 ( Humain
) qui peut créer des instances (comme zell
, par exemple , vincy
et 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 ( zell
, vincy
, nicolas
).
Cette petite différenciation vous montre instantanément la différence entre les constructeurs et les instances de votre code.
C’est quoi « this » ?
this
est 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.
1 2 3 4 5 6 |
function Humain (prenom, nom, age) { // autres propriétés et méthodes console.log(this) } const zell = new Human('Zell', 'Liew', 29) |

this
dans un constructeur pointe sur l’instance
this
est un concept très important dans la programmation orientée objet. Donc, vous devez vous familiariser avec cela. Voici un article qui explique this
en 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.
- Merci d’avoir lu ! Si vous avez aimé cet article,
- Abonnez-vous à ma chaîne Youtube
- Faites un coucou sur : Instagram | Facebook | Twitter |
- Avez-vous besoin d’aide pour votre projet web ? Ecrivez moi à l’adresse suivante : david@oschool.ci
- Téléchargez gratuitement mes livres ici