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:

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

1 Création d’objets à partir d’un objet commun
2 Nommer des constructeurs et des instances
3 C’est quoi « this » ?
4 En résumé

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.

const humain = {
  prenom: 'David'
  nom: 'Yao',
  age: 29,
  direNom () {
    console.log(`Je suis David Yao`)
  }
}

human.direNom() // Je suis David Yao

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 humaincar la variable humainest utilisée.

const humain2 = {
  prenom: 'Vincy',
  nom: 'Zhang',
  age: 28,
  direNom () {
    console.log(`Je suis Vincy Zhang`)
  }
}

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 humainet humain2, il est plus logique de les appeler Davidet Vincy.

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`)
  }
}

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!

// 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`)
  }
}

// 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:

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}`)
  }
}

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}`)

}

// Créer une nouvelle personne avec le mot clé `new`
const zell = new Humain('Zell', 'Liew', 29)

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 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!

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

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 , 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 ( 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 » ?

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.

function Humain (prenom, nom, age) {
  // autres propriétés et méthodes
  console.log(this)
}

const zell = new Human('Zell', 'Liew', 29)

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

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.

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

Partages à tous tes amis !

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

Nommer des constructeurs et des instances

C’est quoi « this » ?

En résumé

Laisser un commentaire Annuler la réponse