Héritage de classe en JavaScript

Héritage de classe dans Javascrip est une fonctionnalité précieuse qui permet la réutilisation du code. En utilisant l'héritage de la classe, la classe infantile aura tout accès aux propriétés et méthodes de la classe parentale dans un programme JavaScript. Il vous permet également de créer une classe d'enfants qui hérite de la fonctionnalité de la classe parent tout en vous permettant de le remplacer.

Cet article discutera de l'héritage des classes en JavaScript. Nous expliquerons également méthodes d'observation et Héritage de méthodes statiques Utilisation de l'héritage de la classe en JavaScript. De plus, chacune des sections spécifiées sera démontrée à l'aide d'exemples. Alors, commençons!

Héritage de classe en JavaScript

Le mécanisme dans lequel une classe hérite des méthodes et propriétés d'une autre classe Héritage de classe. Le "Base" ou la "Parent«La classe est celle dont les méthodes et les propriétés sont héritées, tandis que le«Dérivé" ou la "Enfant«La classe hérite de la fonctionnalité de la classe parent:

Le "prolongement»Le mot-clé est utilisé pour établir l'héritage de la classe entre la classe parent et enfant, et le«super»Le mot-clé est utilisé pour accéder aux méthodes et propriétés de la classe parentale.

Exemple: héritage de classe en javascript

Dans l'exemple donné ci-dessous, nous définirons deux classes: Personne et Employé, et créer l'héritage de classe entre eux en utilisant le «super" et "prolongement" mots clés.

Tout d'abord, nous définirons un parent ou une classe de base nommée «Personne”Avoir un constructeur et une méthode de montrent ():

classe de classe
constructeur (nom)
ce.name = name;

montradeName ()
console.journal ('mon nom est' + ceci.nom);

Dans la prochaine étape, nous créerons la classe enfant nommée «Employé«Qui aura un constructeur et un«DisplayStatus ()" méthode. Pour établir une relation d'héritage de classe avec le «Personne«Classe, vous devez utiliser le«prolongement»Mots-clés et spécifiez le nom de la classe parent, qui est«Personne" dans notre cas. Après cela, le «Employé"La classe héritera du"Personne«Méthodes et propriétés de la classe.

Aussi, dans le «Employé"Constructeur de classe, nous invoquerons"super()«Pour appeler le constructeur du«Personne"Classe en passant le"nom" argument:

L'employé de classe étend la personne
constructeur (nom)
super (nom);

DisplayStatus ()
console.log («je suis un employé»);

Maintenant, nous allons créer un «employé«Objet du«Employé"Classe et passera"Jack«Comme arguments de nom dans le constructeur:

Soit Employee = New Employee («Jack»);

Le créé "employé«L'objet a hérité de toutes les méthodes et des biens du«Personne" classe. Maintenant, nous invoquerons le «montradame ()«Méthode du«Personne«Classe avec lui:

employé.montradame ();

Enfin, nous appellerons le «DisplayStatus ()«Méthode du«Employé”Objet de classe:

employé.DisplayStatus ();

Jetez un œil à l'image ci-dessous du code fourni et de sa sortie:

Comme super () initialise le «ce”Objet, vous devez d'abord l'invoquer avant d'y accéder. Cependant, si vous essayez d'accéder à "ce"Avant d'exécuter super (), cela vous donnera une erreur.

Par exemple, pour initialiser le «âge«Propriété du«Employé«Classe Dans son constructeur, nous appellerons le«super()"D'abord, puis accédez au"ce" objet:

L'employé de classe étend la personne
constructeur (nom, âge)
super (nom);
ce.âge = âge;

afficher()
console.log ("je suis un employé");

getage ()
retourner ceci.âge;

Maintenant, au moment de la création du «Employé1«Objet du«Employé"Classe, nous passerons"Jack" comme nom et "29" comme âge Argument au constructeur:

Soit Employee1 = New Employee («Jack», 29);

Ensuite, après l'initialisation, nous invoquerons le «getage ()«Méthode de notre classe d'employés pour afficher la valeur de la propriété de l'âge:

console.Journal (Employé1.getage ());

Découvrez la sortie de l'exemple ci-dessus:

Méthodes d'observation utilisant l'héritage des classes en javascript

Les méthodes ayant le même nom peuvent être définies dans les classes parents et enfants. Dans une telle situation, lorsque vous invoquez la méthode d'un objet de classe d'enfants, il ombrera la méthode présente dans la classe parentale.

Par exemple, le Prédire ci-dessous "Étudiant"La classe est la classe d'enfants du"Personne"Et redéfinit le"montradame ()" méthode:

Élève de classe étend la personne
constructeur ()
Super ('Jack');

montradeName ()
console.Log ('Mon nom est Jack');

Maintenant le "montradame ()«La méthode existe dans la classe infantile et aussi dans la classe parentale. Donc, quand vous appelez le «montradame ()" avec le "Étudiant”Objet de classe, il invoquera la méthode montrée () définie dans la classe enfant:

Laissez Student1 = New Student ();
étudiant1.montradame ();

Voici l'exemple de code avec sa sortie:

Si vous souhaitez invoquer la méthode de classe parent ayant le même nom, dans la classe enfant, vous devez écrire "super.Méthode (arguments)". Par exemple, nous appellerons le «montradame ()«Méthode du«Personne»(Parent) Classe en ajoutant la ligne«super.montradame ()”Dans notre classe Child Class WakeDame ():

montradeName ()
super.montradame ();
console.log («fonction enfant»);

Maintenant, lorsque l'objet de classe d'enfants invoque le «montradame ()», Il passera par le corps de la méthode de classe de classe infilt. Après avoir terminé l'exécution de la méthode Parent Class closeDame (), le contrôle sera remis à la méthode affichée de la classe enfant:

Laissez Student1 = New Student ();
étudiant1.montradame ();

Dans l'image suivante, vous pouvez voir la sortie du «montradame ()" méthode:

Héritage de membres statiques utilisant l'héritage de classe en JavaScript

La classe infantile peut également hériter des méthodes et des propriétés statiques de la classe parentale. Laissez-nous vous aider à comprendre ce concept en démontrant un exemple.

Dans l'exemple suivant, nous définirons une statique "Bonjour le monde()"Méthode dans la même"Personne«Classe parent qui sortira simplement le«Bonjour le monde”String en l'appelant:

classe de classe
constructeur (nom)
ce.name = name;

montradeName ()
console.journal ('mon nom est' + ceci.nom);

Helloworld statique ()
console.journal («bonjour le monde»);

Dans la prochaine étape, nous créerons «Employé«En tant que classe d'enfants du«Personne», Il peut donc hériter de la méthode et des propriétés de la classe parent, y compris le«Bonjour le monde()”Méthode statique:

L'employé de classe étend la personne
DisplayStatus ()
console.log («je suis un employé»);

Ensuite, nous invoquerons la méthode statique Helloworld () à travers la ««Employé" classe:

Employé.Bonjour le monde();

L'employé.La méthode helloworld () sera exécutée comme la personne.Helloworld () Méthode:

Conclusion:

Vous pouvez utiliser le prolongement mot-clé pour créer un héritage de classe en javascript et le super mot-clé pour se référer à la classe parent. Avec le mécanisme de succession de la classe en JavaScript, la classe infantile peut accéder aux méthodes et propriétés de la classe des parents. Cet article a discuté de l'héritage de la classe en javascript. Nous avons également expliqué des méthodes d'observation et hérité de méthodes statiques en utilisant l'héritage de la classe en JavaScript. De plus, chacune des sections spécifiées est démontrée à l'aide d'exemples.