Programmation orientée objet en JavaScript – Expliquée avec des exemples

JavaScript n’est pas un langage orienté objet basé sur des classes. Mais il a toujours des moyens d’utiliser la programmation orientée objet (POO).

Dans ce tutoriel, je vais vous expliquer la POO et vous montrer comment l’utiliser.

Selon Wikipedia, la programmation basée sur les classes est

un style de programmation orientée objet (POO) dans lequel l’héritage se produit via la définition de classes d’objets, au lieu de l’héritage se produisant via les seuls objets

Le modèle le plus populaire de POO est basé sur les classes.

Mais comme je l’ai mentionné, JavaScript n’est pas une langue basée sur une classe – c’est une langue basée sur un prototype.

Selon la documentation de Mozilla:

Un langage basé sur un prototype a la notion d’objet prototypique, un objet utilisé comme modèle à partir duquel obtenir les propriétés initiales d’un nouvel objet.

Regardez ce code:

let names = { fname: "Dillion", lname: "Megida"}console.log(names.fname);console.log(names.hasOwnProperty("mname"));// Expected Output// Dillion// false

La variable objet names n’a que deux propriétés – fname et lname. Aucune méthode du tout.

Alors d’où vient hasOwnProperty ?

Eh bien, il provient du prototype Object.

Essayez d’enregistrer le contenu de la variable dans la console:

console.log(names);

Lorsque vous développez les résultats dans la console, vous obtiendrez ceci:

Notez la dernière propriété – __proto__ ? Essayez de l’étendre :

Vous verrez un ensemble de propriétés sous le Object constructeur. Toutes ces propriétés proviennent du prototype global Object. Si vous regardez de près, vous remarquerez également notre hasOwnProperty caché.

En d’autres termes, tous les objets ont accès au prototype de Object. Ils ne possèdent pas ces propriétés, mais ont accès aux propriétés du prototype.

La propriété __proto__

Indique l’objet utilisé comme prototype.

C’est la propriété de chaque objet qui lui donne accès à la propriété Object prototype.

Chaque objet a cette propriété par défaut, qui fait référence au Object Protoype sauf lorsqu’il est configuré autrement (c’est-à-dire lorsque le __proto__ de l’objet est pointé vers un autre prototype).

Modification de la propriété __proto__

Cette propriété peut être modifiée en indiquant explicitement qu’elle doit faire référence à un autre prototype. Les méthodes suivantes sont utilisées pour y parvenir :

Objet.create()

function DogObject(name, age) { let dog = Object.create(constructorObject); dog.name = name; dog.age = age; return dog;}let constructorObject = { speak: function(){ return "I am a dog" }}let bingo = DogObject("Bingo", 54);console.log(bingo);

Dans la console, voici ce que vous auriez:

Notez la propriété __proto__ et la méthode speak ?

Object.create utilise l’argument qui lui est passé pour devenir le prototype.

nouveau mot clé

function DogObject(name, age) { this.name = name; this.age = age;}DogObject.prototype.speak = function() { return "I am a dog";}let john = new DogObject("John", 45);

john la propriété __proto__ est dirigée vers le prototype de DogObject. Mais rappelez-vous, le prototype de DogObject est un objet (paire de clés et de valeurs), il possède donc également une propriété __proto__ qui fait référence au protype global Object.

Cette technique est appelée CHAÎNAGE PROTOTYPE.

Notez que: l’approche par mot clé new fait la même chose que Object.create() mais ne fait que la rendre plus facile car elle fait certaines choses automatiquement pour vous.

Et ainsi de suite…

Chaque objet en Javascript a accès au prototype du Object par défaut. Si elle est configurée pour utiliser un autre prototype, disons prototype2, alors prototype2 aurait également accès au prototype de l’Objet par défaut, et ainsi de suite.

Combinaison Objet + fonction

Vous êtes probablement confus par le fait que DogObject est une fonction (function DogObject(){}) et qu’elle possède des propriétés accessibles avec une notation par points. C’est ce qu’on appelle une combinaison d’objets de fonction.

Lorsque les fonctions sont déclarées, par défaut, de nombreuses propriétés leur sont attachées. N’oubliez pas que les fonctions sont également des objets dans les types de données JavaScript.

Maintenant, la classe

JavaScript a introduit le mot clé class dans ECMAScript 2015. Cela fait ressembler JavaScript à un langage de POO. Mais ce n’est que du sucre syntaxique sur la technique de prototypage existante. Il continue son prototypage en arrière-plan mais fait ressembler le corps extérieur à la POO. Nous allons maintenant voir comment c’est possible.

L’exemple suivant est une utilisation générale d’un classen JavaScript :

class Animals { constructor(name, specie) { this.name = name; this.specie = specie; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }}let bingo = new Animals("Bingo", "Hairy");console.log(bingo);

Ceci est le résultat dans la console:

Le __proto__ fait référence au prototype Animals (qui à son tour fait référence au prototype Object).

À partir de cela, nous pouvons voir que le constructeur définit les principales fonctionnalités alors que tout ce qui est en dehors du constructeur (sing() et dance()) sont les fonctionnalités bonus (prototypes).

En arrière-plan, en utilisant l’approche par mot clé new, ce qui précède se traduit par:

function Animals(name, specie) { this.name = name; this.specie = specie;}Animals.prototype.sing = function(){ return `${this.name} can sing`;}Animals.prototype.dance = function() { return `${this.name} can dance`;}let Bingo = new Animals("Bingo", "Hairy");

Sous-classe

Il s’agit d’une fonctionnalité dans la POO où une classe hérite des fonctionnalités d’une classe parente mais possède des fonctionnalités supplémentaires que le parent ne possède pas.

L’idée ici est, par exemple, disons que vous voulez créer une classe de chats. Au lieu de créer la classe à partir de zéro – en indiquant à nouveau le nom, l’âge et la propriété de l’espèce, vous hériteriez de ces propriétés de la classe parent animals.

Cette classe de chats peut alors avoir des propriétés supplémentaires comme la couleur des moustaches.

Voyons comment les sous-classes sont effectuées avec class.

Ici, nous avons besoin d’un parent dont la sous-classe hérite. Examinez le code suivant:

class Animals { constructor(name, age) { this.name = name; this.age = age; } sing() { return `${this.name} can sing`; } dance() { return `${this.name} can dance`; }} class Cats extends Animals { constructor(name, age, whiskerColor) { super(name, age); this.whiskerColor = whiskerColor; } whiskers() { return `I have ${this.whiskerColor} whiskers`; }}let clara = new Cats("Clara", 33, "indigo");

Avec ce qui précède, nous obtenons les sorties suivantes:

console.log(clara.sing());console.log(clara.whiskers());// Expected Output// "Clara can sing"// "I have indigo whiskers"

Lorsque vous déconnectez le contenu de clara dans la console, nous avons:

console.log(clara)

Vous remarquerez que clara a une propriété __proto__ qui fait référence au constructeur Cats et accède au . Cette propriété __proto__ possède également une propriété __proto__ qui fait référence au constructeur Animals permettant ainsi d’accéder à sing() et dance()name et age sont des propriétés qui existent sur chaque objet créé à partir de cela.

En utilisant l’approche de la méthode Object.create, ce qui précède se traduit par:

function Animals(name, age) { let newAnimal = Object.create(animalConstructor); newAnimal.name = name; newAnimal.age = age; return newAnimal;}let animalConstructor = { sing: function() { return `${this.name} can sing`; }, dance: function() { return `${this.name} can dance`; }}function Cats(name, age, whiskerColor) { let newCat = Animals(name, age); Object.setPrototypeOf(newCat, catConstructor); newCat.whiskerColor = whiskerColor; return newCat;}let catConstructor = { whiskers() { return `I have ${this.whiskerColor} whiskers`; }}Object.setPrototypeOf(catConstructor, animalConstructor);const clara = Cats("Clara", 33, "purple");clara.sing();clara.whiskers();// Expected Output// "Clara can sing"// "I have purple whiskers"

Object.setPrototypeOf est une méthode qui prend deux arguments – l’objet (premier argument) et le prototype souhaité (deuxième argument).

De ce qui précède, la fonction Animals renvoie un objet avec le animalConstructor comme prototype. La fonction Cats renvoie un objet avec catConstructor comme prototype. catConstructor d’autre part, est donné un prototype de animalConstructor.

Par conséquent, les animaux ordinaires n’ont accès qu’au animalConstructor mais les chats ont accès au catConstructor et au animalConstructor.

Wrapping Up

JavaScript tire parti de sa nature de prototype pour accueillir les développeurs de POO dans son écosystème. Il fournit également des moyens simples de créer des prototypes et d’organiser les données associées.

Les vrais langages de POO n’effectuent pas de prototypage en arrière-plan – prenez simplement note de cela.

Un grand merci au cours de Will Sentance sur les maîtres Frontend – JavaScript: Les parties difficiles du JavaScript orienté Objet. J’ai appris tout ce que vous voyez dans cet article (plus un peu de recherche supplémentaire) de son cours. Tu devrais vérifier.

Vous pouvez me contacter sur Twitter à iamdillion pour toute question ou contribution.

Merci d’avoir lu 🙂