Programmation orientée objet avec JavaScript

Ce que vous allez créer

Connaissez-vous le terme "code spaghetti"? C'est une métaphore que les développeurs non-JavaScript pourraient entendre critiquer le langage. C'est un code sans structure. Il s'agira d'une ligne après l'autre d'énoncés. Certains peuvent être encapsulés dans des fonctions, d'autres pas du tout. Et si vous avez de la chance, les 9 000 lignes de code seront dans un seul fichier. Cette structure "spaghetti" est probablement le résultat d'une programmation procédurale.

En programmation procédurale, les fonctions sont utilisées pour effectuer des tâches. Nous avons besoin de fonctions, mais nous avons également besoin d’une conception avec laquelle nous pouvons travailler. Et bien que les spaghettis soient parfaits pour le dîner, ce n'est pas pour le code. L'antidote est la programmation orientée objet. Pour comprendre la programmation orientée objet, nous allons couvrir la conception d’un programme, la définition de classes et la création d’objets..

Concevoir un programme

Imaginons que vous ayez été chargé de faire une demande de librairie. Juste pour le plaisir, appelons notre librairie Amazonia. Amazonia aura des livres. Il y aura des critiques de livres. Et nous voudrons rechercher des livres par auteur. Il y aura plus de fonctionnalités que nous voudrons implémenter dans notre application, mais cela suffit pour le moment..  

La programmation orientée objet est centrée sur la création d'objets. Alors, comment pouvons-nous traduire ces exigences en objets? Une technique consiste à dresser une liste des noms à partir de notre description, puis à l’affiner pour les adapter au problème. Nous avons mentionné les noms suivants dans notre problème:

  • Application
  • Librairie
  • Livres
  • Avis
  • Auteur

Application est un nom non pertinent, il peut donc être jeté. Nous pouvons également nous débarrasser de la librairie parce que c'est similaire à l'application. Si nous devions faire quelque chose avec plusieurs librairies, nous pourrions le garder. Il nous reste des livres, des critiques et des auteurs. (Les auteurs ont été pluralisés car nous aurons plusieurs auteurs dans cette application.)

Voyons maintenant comment nous allons concevoir chaque classe. Une classe est un modèle pour la création d'objets. La classe de livre que nous créons nous fournira un plan pour la création d’objets livre. 

Cela ressemble à la façon dont un architecte utilise un plan pour créer des maisons. Le plan directeur montrera les chambres, les salles de bain, la cuisine et le salon. De nombreuses maisons peuvent être réalisées à partir de ce plan. Cependant, ils ne doivent pas tous être les mêmes. Chaque maison peut être personnalisée en changeant la peinture, le revêtement de sol ou les luminaires, par exemple.

Tâche

Ecrivez les cours que vous utiliseriez pour un programme de panier. Le panier devrait pouvoir effectuer les opérations suivantes: 

  1. Tenir une liste d'objets.
  2. Ajouter et supprimer des articles du panier.
  3. Calculer le total du panier.
  4. Obtenir des informations client.
  5. Créer un reçu pour les achats.

Des classes

Pour concevoir notre classe de livres, nous devons examiner ce que la classe est responsable de savoir et ce qu’elle est responsable de faire. Pour un livre, nous devons connaître le titre, l'auteur et l'ISBN. Ce sont nos attributs de données. 

La classe devra pouvoir obtenir et définir le titre, obtenir et définir l'auteur et obtenir et définir l'ISBN. Ce seront les méthodes de la classe. Voici à quoi devrait ressembler notre classe de livre, compte tenu de nos exigences:

class Book constructeur (titre, auteur, isbn) this.title = titre; this.author = auteur; this.isbn = isbn;  getTitle () return this.title;  setTitle (newTitle) this.title = newTitle;  getAuthor () return this.author;  setAuthor (newAuthor) this.author = newAuthor;  getIsbn () return this.isbn;  setIsbn (newIsbn) this.isbn = newIsbn;  

Par convention, le nom de la classe est en majuscule. Le constructeur est une fonction spéciale qui déclare et initialise les attributs de données. À l’intérieur de la fonction constructeur, les attributs sont ajoutés à l’aide de la ce mot-clé. Ensuite, toutes les méthodes de la classe sont listées sans séparateurs..  

Méthodes commençant par obtenir sont connues sous le nom de méthodes d'accès, car elles renvoient une valeur. Méthodes commençant par ensemble sont des méthodes de mutation parce qu'elles stockent une valeur ou modifient la valeur d'un attribut.  

C'est la forme générale pour définir une classe:

class ClassName constructeur (… args) this.attr = arg1; this.attr2 = arg2;… methodOne () … methodTwo () …

Une classe peut également être déclarée en utilisant cette syntaxe:

const ClassName = class …

Les classes peuvent aussi avoir des méthodes statiques. Une méthode statique est une méthode qui est une propriété de la classe, pas de l'objet. Supposons que nous voulions créer une méthode statique pour notre classe book afin de générer des identifiants. C'est la syntaxe:

class Book constructeur () … statique generateId () … 

Pour appeler la méthode:

Book.generateId ();

Une question naturelle serait de savoir quand et pourquoi utiliser une méthode statique. Je ne peux pas dire que je connais une bonne raison d'utiliser des méthodes statiques. Cela dépend de la façon dont vous concevez votre classe. Une méthode statique peut être utilisée comme méthode d'assistance pour vos objets, mais ces fonctions peuvent ensuite être stockées dans leur propre classe. Si vous connaissez un bon cas d'utilisation, laissez vos commentaires dans les commentaires..

Enfin, pour l’organisation, vous devez stocker une classe en tant que module. Un module est juste un fichier qui contient votre code. Pour transformer notre classe de livres en module, nous ajoutons un exportation déclaration devant elle.

Livre de classe d'exportation …

Pour utiliser la classe Book dans un autre fichier, nous l'importons.

importer Livre du livre

Où le contient les valeurs exportées du module, et du livre est une référence au fichier Book.js.

Tâche

Définir un cours pour les auteurs et les critiques.  

Objets

La classe en elle-même nous est inutile à moins de faire quelque chose avec elle. Nous voulons créer des livres. Pour ce faire, nous devons instancier la classe. Instantiate est le terme technique utilisé pour créer de nouveaux objets. Nous appelons l'objet créé à partir de la classe une instance. Voici comment nous créerions une nouvelle instance d'un livre:

let book = new Book ("Grandes attentes", "Charles Dickens", 1234); book.getTitle () // grandes attentes

Les objets doivent être instanciés avec le Nouveau opérateur. Les données transmises à l'objet sont les paramètres que nous avons définis dans notre constructeur. C'est la forme générale pour instancier une classe:

variableName = new ClassName (… args);

Supposons que nous voulions ajouter des attributs à notre classe de livres, tels qu'un identifiant, un prix et le nombre en stock. Nous avons maintenant six paramètres dans notre constructeur, et ce n’est pas beau. Ce n'est pas seulement mauvais à regarder. Cela crée un effort supplémentaire pour les développeurs utilisant la classe car ils doivent connaître l'ordre des arguments. Une meilleure solution consiste à passer un objet en argument. Exemple:

class Book constructeur (data) this.id = data.id; this.title = data.title; this.author = data.author; this.isbn = data.isbn; this.units = data.units; this.price = data.price;  getTitle () return this.title; …

Pour instancier l'objet:

let data = id: 1, titre: "Great Expectations", auteur: "Charles Dickens", isbn: 1234, unités: 10, prix: 29,95 let book = new Book (data);

Dans notre exemple, nous aurions également pu accéder au titre avec la déclaration titre de livre parce que tous les attributs de la classe sont publics. Maintenant, vous vous demandez peut-être pourquoi j'ai créé toutes ces méthodes si nous pouvons accéder directement aux attributs. Était-ce juste pour vous montrer la syntaxe? Oui. Aussi, je veux montrer les avantages d'organiser votre code de cette manière. 

Le regroupement de code associé à un objet est appelé encapsulation. L'un des avantages de l'encapsulation est la dissimulation des données. Masquer les données signifie qu'il est impossible d'accéder aux attributs d'un objet en dehors de la classe.. 

Dans d'autres langages tels que Java et Python, nous pouvons avoir des attributs privés et des méthodes privées. Comme toutes nos données sont publiques par défaut dans une classe JavaScript, nous ne pouvons pas tirer parti de cette fonctionnalité. Néanmoins, nous devrions accéder à nos données avec des accesseurs et des passeurs. Une convention est de préfixer un attribut avec un trait de soulignement _ pour signaler qu'il est privé.

Tâche

Créer un objet livre qui utilise un objet auteur pour définir l'attribut auteur.  

Dernières pensées

Nous avons appris qu'une classe est un modèle pour la création d'objets et qu'un objet est une instance d'une classe. L’intégration de logiciels en objets a pour avantage de donner une structure de programme et de la rendre plus facile à gérer.. 

Lorsque nous avons un programme volumineux, le diviser en objets permet de développer et de gérer les parties indépendamment des autres. Avec cette modularité vient la réutilisabilité. Parce que notre code est encapsulé, les objets peuvent être utilisés encore et encore dans d'autres parties du programme. De plus, nous avons une unité de code qui est testable. Plus notre code est testé, plus il est sécurisé contre les bugs.  

Lectures complémentaires

  • Réseau de développeurs Mozilla - Classes
  • Vous ne savez pas JS: ES6 et au-delà: Chapitre 3 Organisation
  • Explorer ES6: Classes