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 classer mot-clé. 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 classer mot-clé (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{
//corps de classe
}

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.

classe Étudiant{
constructeur (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 constructeur comme vous pouvez le voir dans l'exemple ci-dessus.

En rapport: Apprenez à créer des classes en Java

Le constructeur dans l'exemple ci-dessus prend trois paramètres et utilise le ce mot-clé 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 ce Le mot-clé 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.

En rapport: 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.

//créer un nouvel objet
const john = new Student('John', 'Brown', '2018');

Le code ci-dessus utilise le Étudiant classe pour créer un objet.

Lors de la création d'un objet d'une classe, vous devez utiliser le Nouveau mot-clé, 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 le John variable, vous pourrez toujours créer un nouvel objet à l'aide de la Étudiant class, mais alors il n'y aura 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.

classe Étudiant{
constructeur (firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// méthode de rapport
rapport(){
return `${this.firstName} ${this.lastName} a commencé à fréquenter cet établissement en ${this.startDate}`
}
}

La classe ci-dessus contient une méthode qui générera un rapport sur chaque élève créé avec le Étudiant classer. Pour utiliser le rapport() vous aurez besoin d'utiliser un objet existant de la classe pour faire un simple appel de fonction.

Grâce à l'exemple "créer un objet" ci-dessus, vous devriez avoir un objet de la Étudiant classe affectée à la variable John. En utilisant John, vous pouvez maintenant appeler avec succès le rapport() méthode.

Exemple d'utilisation de méthodes de classe

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

//créer un nouvel objet
const john = new Student('John', 'Brown', '2018');
//appel de la méthode report et stockage de son résultat dans une variable
let result = john.report();
//impression du résultat sur la console
console.log (résultat);

Le code ci-dessus utilise le Étudiants class pour produire la sortie suivante dans la console:

John Brown a commencé à fréquenter cette institution en 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.

Dans l'exemple ci-dessus, vous ne pouvez pas utiliser le rapport() méthode sans objet de la classe. C'est parce que le rapport() La méthode repose 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.

classe Étudiant{
constructeur (firstName, lastName, startDate){
this.firstName = firstName;
this.lastName = lastName;
this.startDate = startDate;
}
// méthode de rapport
rapport(){
return `${this.firstName} ${this.lastName} a commencé à fréquenter cet établissement en ${this.startDate}`
}
//méthode statique
date de fin statique (date de début){
return startDate + 4;
}
}

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

Utilisation d'un exemple de méthode statique

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

//appel d'une méthode statique et affichage de son résultat sur la console
console.log (Student.endDate (2018));

La ligne de code ci-dessus utilise le Étudiants class 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 classer mot-clé.
• 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.

Le console.Journal() 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.

Familiarisez-vous avec le console.log() est l'une des choses les plus importantes que vous puissiez faire en tant que développeur JavaScript.

L'aide-mémoire JavaScript ultime

Obtenez un rappel rapide sur les éléments JavaScript avec cette aide-mémoire.

Lire la suite

A propos de l'auteur