Classes OOP en JavaScript | Expliqué

Avant ES6, "prototypes"Ont été utilisés pour simuler des classes en JavaScript, où des propriétés supplémentaires peuvent être associées à un prototype utilisant l'héritage. Lorsqu'une version nouvelle et améliorée de ES5 a été présenté, connu sous le nom ES6, Classes javascript y ont été ajoutés.

Dans ES6, les classes sont considérées comme une composante fondamentale de JavaScript, et il a beaucoup plus simple et sujette aux erreurs syntaxe par rapport aux prototypes. Semblable à la programmation orientée objet (OOP), la classe JavaScript comprend une méthode de constructeur, certaines propriétés, méthodes et objets spécifiques du type de classe donné.

Ce message explique Cours OOP dans Javascrip avec l'aide d'exemples appropriés. Alors, commençons!

Classes OOP en JavaScript

Comme mentionné précédemment, les classes JavaScript sont introduites dans ES6. Ils offrent une manière concise de déclarer la classe en utilisant une syntaxe similaire à ce que nous utilisons dans OOP.

En JavaScript, vous pouvez utiliser le «classe”Mot-clé pour définir une classe. Il ajoute du sucre syntaxique (un bon type de sucre) sur le schéma d'hérédité prototype existant.

Syntaxe des classes OOP en javascript

Pour créer une classe OOP en JavaScript, vous devez suivre la syntaxe divisée ci-dessous:

classe classname
constructeur () …

Ici, "classe«Est un mot-clé utilisé pour créer une classe. De plus, une classe OOP doit avoir une méthode nommée «constructeur()".

Exemple: créer une classe OOP dans JavaScript

Nous définirons une classe nommée «Personne«Qui a deux propriétés:«nom" et "âge»:

classe de classe
constructeur ()
ce.name = 'Alex';
ce.âge = 25;

Pour utiliser la classe de personne, nous devons créer un objet ou exemple de la classe spécifiée:

Soit Person1 = new Person ();

Maintenant, "personne 1«L'objet peut accéder aux propriétés du«Personne" classe:

console.journal (Person1.Nom + "" + Person1.âge);

Comme mentionné précédemment, une classe OOP en JavaScript doit contenir un constructeur. Voulez-vous en savoir plus sur les constructeurs en javascript? Si oui, alors suivez la section ci-dessous.

Constructeurs de classes OOP en javascript

Constructeur est une méthode invoquée lorsque vous créez une instance d'une classe OOP. Il est également utilisé pour initialiser les objets au sein d'une classe. Cependant, JavaScript créera et exécutera automatiquement un constructeur vide si vous n'avez défini aucune méthode de constructeur pour une classe OOP.

Types de constructeurs pour les classes OOP en JavaScript

En JavaScript, il existe les deux types de constructeurs suivants:

• Constructeur par défaut
• Constructeur paramétré

La section suivante expliquera brièvement le constructeur par défaut et paramétré et leur utilisation dans JavaScript.

Constructeur par défaut pour les classes OOP en javascript

Vous pouvez également définir explicitement un constructeur par défaut sans arguments si vous souhaitez effectuer une opération spécifique tout en créant un objet de classe OOP.

Syntaxe du constructeur par défaut en javascript

classe classname
constructeur()
// corps du constructeur par défaut

Exemple: constructeur par défaut pour les classes OOP en JavaScript

Dans l'exemple divisé ci-dessous, nous définirons un constructeur par défaut pour le «Personne" classe. Selon la définition du «constructeur()«Méthode, chaque fois qu'un«Personne«L'objet de classe est créé, il initialisera son«nom«Propriété à«Alex", et "âge«Propriété comme«25."

classe de classe
constructeur ()
ce.name = 'Alex';
ce.âge = 25;


const Person1 = new Person ();
console.journal ("Nom:" + Person1.nom);
console.Log ("Age:" + Person1.âge);

L'exécution du programme donné créera un «personne 1«Objet du«Personne”Classe OOP en utilisant le constructeur par défaut. Le constructeur par défaut initialise ensuite les propriétés spécifiées pour le «personne 1" objet. Enfin, le «console.enregistrer()«La méthode imprimera les valeurs stockées dans le«personne 1.nom" et "personne 1.âge" propriétés:

Dans une classe OOP, l'utilisation du constructeur par défaut est utile lorsque vous souhaitez initialiser les propriétés de tous les objets créés avec la même valeur. Mais, que se passe-t-il si vous devez attribuer des valeurs uniques à l'objet tout en le créant? En JavaScript, vous pouvez réaliser cette fonctionnalité à l'aide du «Constructeur paramétré".

Constructeur paramétré pour les classes OOP en JavaScript

Un constructeur qui comprend des paramètres est connu sous le nom de «Constructeur paramétré". Ce type de constructeur est principalement utilisé lorsque vous souhaitez initialiser les propriétés de la classe JavaScript OOP avec certaines valeurs spécifiques.

Syntaxe du constructeur paramétré en javascript

classe classname
constructeur (paramètre1, paramètre2…, paramètre)
// corps du constructeur paramétré

Le constructeur paramétré accepte les paramètres passés comme «arguments"Tout en créant un objet de classe OOP.

Exemple: Constructeur paramétré pour les classes OOP en JavaScript

Nous allons créer un constructeur paramétré pour le «Personne”Classe qui initialise les propriétés avec les valeurs passées comme arguments:

classe de classe
constructeur (nom, âge)
ce.name = name;
ce.âge = âge;

Dans le code ci-dessous, "personne 1«Objet du«Personne"La classe sera créée à l'aide d'un constructeur paramétré où"Max"Est passé comme"nom«Valeur de la propriété, et«25«L'argument représente la valeur de«âge" propriété:

const Person1 = new Person ("Max", 25);
console.journal ("Nom:" + Person1.nom);
console.Log ("Age:" + Person1.âge);

La sortie suivante signifie que nous avons créé avec succès un «personne 1”Objet ayant les valeurs de propriété spécifiées à l'aide du constructeur paramétré:

Nous avons parlé de la création de classes OOP, de leurs objets connexes et de la définition des constructeurs par défaut et paramétrés. Maintenant, nous allons avancer et discuter d'un autre composant critique d'une classe OOP qui est «Méthode".

Méthodes dans les classes OOP en JavaScript

Méthodes sont un type de fonction associé à des classes JavaScript spécifiques. Ils fonctionnent également comme une fonction membre lorsqu'ils sont définis dans une classe et peuvent être utilisés pour accéder aux propriétés de la classe.

Syntaxe des méthodes pour les classes OOP en JavaScript

classe classname
MethodName
// corps de la méthode

Note: Le nom d'une méthode de classe OOP doit être dans minuscule.

Exemple: méthodes dans les classes OOP en JavaScript

Dans le même "Personne«Classe, nous définirons un«DisplayInfo ()«Méthode qui renvoie les valeurs de«nom" et "âge»Propriétés pour un objet spécifié:

displayInfo ()
return ("nom:" + ceci.Nom + "Age:" + ceci.âge);

Après cela, nous créerons un objet du «Personne" classe:

const Person1 = new Person ("Max", 25);

Ensuite, nous invoquerons le «DisplayInfo ()"En utilisant le"personne 1" objet:

personne 1.DisplayInfo ();

Le "DisplayInfo ()«La méthode renverra le«nom" et "âge«Valeurs du«personne 1" objet:

Nous avons compilé les informations essentielles liées à la classe OOP en JavaScript.

Conclusion

En utilisant le "classe»Mot-clé, vous pouvez définir un Classe OOP en javascript. Dans ES6, les classes JavaScript ont été introduites pour ajouter du sucre syntaxique (un bon type de sucre) par rapport au prototype existant. Semblable à la POO, la classe JavaScript comprend une méthode de constructeur, certaines propriétés, méthodes et objets spécifiques du type de classe donné. Cet article a expliqué Cours OOP dans Javascrip avec l'aide d'exemples appropriés.