Apprenez à créer des classes en JavaScript

En 2015, la version ES6 du langage de programmation JavaScript est sortie. Cette version a introduit des mises à niveau majeures du langage et l'a officiellement placé dans la catégorie des langages de programmation orientés objet parmi d'autres langages tels que Java et C++.

La programmation orientée objet se concentre sur les objets et les opérations qui peuvent être effectuées sur eux. Cependant, avant de pouvoir avoir des objets, vous devez avoir une classe.

Les classes JavaScript sont l'une des fonctionnalités révolutionnaires fournies avec la version ES6 du langage. Une classe peut être décrite comme un modèle utilisé pour créer des objets.

Dans cet article de didacticiel, vous apprendrez à créer et à manipuler des objets à l'aide de classes JavaScript.

Structure de classe JavaScript

Lors de la création d'une classe en JavaScript, vous aurez toujours besoin d'un composant fondamental : le mot – clé class . Presque tous les autres aspects de la classe JavaScript ne sont pas requis pour son exécution réussie.

Une classe JavaScript s'exécutera naturellement si un constructeur n'est pas fourni (la classe créera simplement un constructeur vide lors de l'exécution). Cependant, si une classe JavaScript est créée avec des constructeurs et d'autres fonctions mais qu'aucun mot-clé de classe n'est utilisé, cette classe ne sera pas exécutable.

Le mot – clé class (qui doit toujours être en minuscule) est une nécessité dans la structure de classe de JavaScript. L'exemple suivant est la syntaxe générale d'une classe JavaScript. La syntaxe de la classe JavaScript est ci-dessous :

 class ClassName{
 //class body
 }

Créer une classe en JavaScript

En programmation, une classe peut être considérée comme une entité généralisée utilisée pour créer un objet spécialisé. Par exemple, dans un environnement scolaire, une entité généralisée (une classe) peut être des étudiants et un objet d'étudiants peut être John Brown. Mais avant de créer un objet, vous devez connaître les données qu'il stockera et c'est là que les constructeurs JavaScript entrent en jeu.

Utilisation de constructeurs dans les classes JavaScript

Un constructeur est vital pour le processus de création de classe pour plusieurs raisons ; il initialise l'état d'un objet (via ses attributs) et il est appelé automatiquement lorsqu'un nouvel objet est instancié (défini et créé).

Utiliser un exemple de constructeur

Ci-dessous, vous verrez un exemple de constructeur avec une explication de ce que cela signifie.

 class Student{
 constructor(firstName, lastName, startDate){
 this.firstName = firstName;
 this.lastName = lastName;
 this.startDate = startDate;
 }
 }

Le code ci-dessus présente un aspect important du constructeur de classe JavaScript ; contrairement à d'autres langages tels que Java et C++, un constructeur JavaScript n'utilise pas le nom de classe pour créer un constructeur. Il utilise le mot-clé constructeur comme vous pouvez le voir dans l'exemple ci-dessus.

Connexes : Apprenez à créer des classes en Java

Le constructeur de l'exemple ci-dessus prend trois paramètres et utilise le mot – clé this pour affecter les paramètres à l'instance actuelle de la classe. Cela peut sembler un peu déroutant, mais ce que vous devez comprendre, c'est qu'une classe peut être considérée comme un modèle utilisé pour créer de nombreuses maisons.

Chaque maison construite peut alors être considérée comme un objet de cette classe. Bien que chacune de ces maisons soit créée avec le même plan, elles se distinguent par leur situation géographique spécifique ou les personnes qui les possèdent.

Le mot-clé this est utilisé pour distinguer chaque objet créé par une classe. Il garantit que les données correctes sont stockées et traitées pour chaque objet créé à l'aide de la même classe.

Créer un objet en JavaScript

Les constructeurs sont importants dans un langage comme JavaScript car ils signifient le nombre d'attributs qu'un objet d'une classe spécifique devrait avoir. Certains langages exigent qu'un attribut (variable) soit déclaré avant de pouvoir être utilisé dans un constructeur ou toute autre méthode. Cependant, ce n'est pas le cas avec JavaScript.

Connexes : Comment déclarer des variables en JavaScript

En regardant le constructeur de classe étudiant ci-dessus, vous pouvez discerner qu'un objet de cette classe aura trois attributs.

Création d'un exemple d'objet

Ci-dessous, vous verrez un exemple de création d'un objet en JavaScript.

 //create a new object
 const john = new Student('John', 'Brown', '2018');

Le code ci-dessus utilise la classe Student pour créer un objet.

Lors de la création d'un objet d'une classe, vous devez utiliser le mot-clé new , suivi du nom de la classe et des valeurs que vous souhaitez affecter aux attributs respectifs. Vous avez maintenant un nouvel étudiant avec le prénom John, le nom de famille Brown et une date de début de 2018. Vous avez également une variable constante : john. Cette variable est importante car elle permet d'utiliser l'objet qui est créé.

Sans la variable john , vous pourrez toujours créer un nouvel objet à l'aide de la classe Student , mais il n'y aura alors aucun moyen d'accéder à cet objet et de l'utiliser avec les différentes méthodes de la classe.

Utilisation de méthodes dans les classes JavaScript

Une méthode est une fonction d'une classe utilisée pour effectuer des opérations sur des objets créés à partir de la classe. Une bonne méthode à ajouter à la classe d'étudiants est celle qui génère un rapport sur chaque étudiant.

Exemple de création de méthodes de classe

Vous trouverez ci-dessous un exemple de création de méthodes de classe en JavaScript.

 class Student{
 constructor(firstName, lastName, startDate){
 this.firstName = firstName;
 this.lastName = lastName;
 this.startDate = startDate;
 }
 // report method
 report(){
 return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
 }
 }

La classe ci-dessus contient une méthode qui va générer un rapport sur chaque étudiant créé avec la classe Student . Pour utiliser la méthode report() , vous devrez utiliser un objet existant de la classe pour effectuer un simple appel de fonction.

Grâce à l'exemple "créer un objet" ci-dessus, vous devriez avoir un objet de la classe Student qui est affecté à la variable john . En utilisant john , vous pouvez maintenant appeler avec succès la méthode report() .

Exemple d'utilisation de méthodes de classe

Vous trouverez ci-dessous un exemple d'utilisation des méthodes de classe en JavaScript.

 //create a new object
 const john = new Student('John', 'Brown', '2018');
 //calling the report method and storing its result in a variable
 let result = john.report();
 //printing the result to the console
 console.log(result);

Le code ci-dessus utilise la classe Students pour produire la sortie suivante dans la console :

 John Brown started attending this institution in 2018

Utilisation de méthodes statiques dans les classes JavaScript

Les méthodes statiques sont uniques car ce sont les seules méthodes d'une classe JavaScript qui peuvent être utilisées sans objet.

D'après l'exemple ci-dessus, vous ne pouvez pas utiliser la méthode report() sans un objet de la classe. En effet, la méthode report() s'appuie sur les attributs d'un objet pour produire un résultat souhaitable. Cependant, pour utiliser une méthode statique, vous n'aurez besoin que du nom de la classe qui stocke la méthode.

Création d'un exemple de méthode statique

Vous trouverez ci-dessous un exemple de méthode statique pour JavaScript.

 class Student{
 constructor(firstName, lastName, startDate){
 this.firstName = firstName;
 this.lastName = lastName;
 this.startDate = startDate;
 }
 // report method
 report(){
 return `${this.firstName} ${this.lastName} started attending this institution in ${this.startDate}`
 }
 //static method
 static endDate(startDate){
 return startDate + 4;
 }
 }

La chose importante à noter dans l'exemple ci-dessus est que chaque méthode statique commence par le mot-clé static .

Utilisation d'un exemple de méthode statique

Vous trouverez ci-dessous un exemple d'utilisation d'une méthode statique en JavaScript.

 //calling a static method and printing its result to the console
 console.log(Student.endDate(2018));

La ligne de code ci-dessus utilise la classe Students pour produire la sortie suivante dans la console :

 2022

Créer une classe JavaScript est facile

Il y a plusieurs choses dont vous devez vous souvenir si vous souhaitez créer une classe JavaScript et instancier un ou plusieurs objets à partir de celle-ci :

• Une classe JavaScript doit avoir le mot – clé class .
• Un constructeur JavaScript indique le nombre de valeurs qu'un objet peut avoir.
• Les méthodes de classe générales ne peuvent pas être utilisées sans objet.
• Les méthodes statiques peuvent être utilisées sans objet.

La console . La méthode log() est utilisée tout au long de cet article pour fournir les résultats de l'utilisation des méthodes générales et statiques dans une classe JavaScript. Cette méthode est un outil utile pour tout développeur JavaScript car elle facilite le processus de débogage.

Se familiariser avec la méthode console.log() est l'une des choses les plus importantes que vous puissiez faire en tant que développeur JavaScript.