Hériter des méthodes d'une autre classe en utilisant l'étendue du mot clé en javascript

Avec les fonctionnalités supplémentaires et la syntaxe de classe plus simple, ES6 a rendu JavaScript beaucoup plus simple. Avant cela, l'héritage JavaScript a été rendu possible avec l'objet.Propriété prototype qui était très différente et complexe par rapport à Java et C ++ et à d'autres langages de programmation de ce type.

Dans cet article, nous examinerons héritage en JavaScript en utilisant le «prolongement»Mot-clé en JavaScript. Les exemples aident à saisir fortement le concept afin que nous allons également donner des exemples. Commençons.

Qu'est-ce que l'héritage?

Comme tout autre langage de programmation, l'héritage est un concept très important dans la programmation orientée objet JavaScript. La définition la plus simple de l'héritage est lorsque les méthodes et les attributs d'une classe de parents ou d'une classe de base sont copiés ou hérités en classes dérivées ou enfants. Il est très utile comme pour cette raison, nous sommes en mesure d'atteindre la réutilisabilité du code. La réutilisabilité du code signifie réutiliser les attributs / propriétés et les méthodes d'une classe dans une autre classe nouvellement créée.

Étend le mot-clé

Maintenant que nous avons regardé quel est l'héritage. Discutons de la façon d'y parvenir. Comme mentionné plus tôt, nous avions l'habitude de faire l'héritage via l'objet.Prototype qui est appelé héritage prototypal. Cependant, une approche plus facile a été suivie qui utilisait le mot-clé.

La fonction de l'extension des mots clés est utilisée pour créer une classe de classe / enfant dérivée à partir d'une classe parent / classe de base. La classe infantile peut hériter de n'importe quelle classe et cette classe devient la classe parentale. Lorsque nous héritons, dans la classe d'enfants, toutes les méthodes et attributs seront hérités de la classe parentale.

Syntaxe:

classe d'enfants de classe étend ParentClass;

Il convient de garder à l'esprit qu'il ne fonctionne que dans la version ECMAScript 2015 (ES6).

Quel navigateur prend en charge le mot-clé «Extension»?

Voyons maintenant quels navigateurs prennent en charge le mot-clé «Extension».

Chrome	Bord	Incendier	Safari	Opéra
49.0	13.0	45.0	9.0	36.0

Maintenant que nous avons couvert la théorie de l'héritage et le mot clé «Extension», implémentez-le en JavaScript.

Exemple:

ClassanimalName
constructeur (nom)
ce.AnimalName = name;

cadeau()
retour'name: '+ ceci.nom animal;


ClassanImalextendSanImalName
constructeur (nom, quantité)
super (nom);
ce.quantité = quantité;

whatanimal ()
Retour ce.présent () + "Quantité:" + ce.quantité;


Const Animal = nouvel animal ("poulet", 5);
alerte (animal.Whatanimal ());

Dans cet exemple, nous avons une classe parent «AnimalName» où nous avons fixé le nom de l'animal. Il a une méthode avec le nom «présent ()». Nous avons un autre «animal» de classe qui étend «nom d'animaux». Cela signifie que la classe «animale» est une classe d'enfants et héritera de toutes les méthodes «animaux». Nous avons une méthode dans la classe «Animal» par le nom de «Whatanimal ()». En cela, nous héritons de la méthode de classe «AnimalName» «présente», puis créons une instance de la classe «animal». Maintenant, lorsque nous alerter la fonction whatanimal (), cela fonctionnera correctement.

Il convient de noter que nous avons utilisé le mot-clé super () pour faire référence à la classe parent dans l'exemple ci-dessus. Lorsque nous appelons la méthode super (), nous appelons en fait le constructeur de la classe parent et nous pouvons accéder à toutes les méthodes et propriétés des parents grâce au mot-clé Super.

Utilisation de Getter et Setter en héritage

Lorsque nous utilisons des cours et des héritages, il est presque impossible de ne pas utiliser les getters et les setters. Il est très utile de récupérer ou de mettre à jour les propriétés avant de retourner ou de définir ces propriétés.

Le mot-clé «Get» est utilisé pour récupérer ou obtenir une propriété. Le mot-clé «Set» est utilisé pour mettre à jour ou définir une propriété.

Par exemple:

ClassanimalName
constructeur (nom)
ce._animalName = name;

get getanimalName ()
Retour ce._animalName;

set setanimalName (nam)
ce._animalName = nam;

cadeau()
retour'name: '+ ceci._animalName;


ClassanImalextendSanImalName
constructeur (nom, quantité)
super (nom);
ce.quantité = quantité;

whatanimal ()
Retour ce.getanimalname;


const Animal = nouvel animal ("poulet", 5);
alerte (animal.Whatanimal ());

Dans cet exemple, nous avons utilisé le caractère de soulignement parce que nous voulions séparer Getter / Setter de l'attribut / propriété réel pour une meilleure compréhension. Cet exemple est identique à la précédente, à l'exception que la classe «AnimalName» a maintenant un Getter et un setter. Nous récupérons le nom de l'animal de la classe parent à travers la méthode GET qui est «getanimalname».

Nous pouvons également définir une propriété de la même manière en ajoutant une seule ligne de plus en utilisant le code ci-dessus.

ClassanimalName
constructeur (nom)
ce._animalName = name;

get getanimalName ()
Retour ce._animalName;

set setanimalName (nam)
ce._animalName = nam;

cadeau()
retour'name: '+ ceci._animalName;


ClassanImalextendSanImalName
constructeur (nom, quantité)
super (nom);
ce.quantité = quantité;

whatanimal ()
Retour ce.getanimalname;


const Animal = nouvel animal ("poulet", 5);
animal.setanimalName = "Cow";
alerte (animal.Whatanimal ());

La sortie sera désormais mise à jour vers la «vache».

Conclusion

L'héritage est l'un des concepts de base de la programmation orientée objet et la définition de l'héritage peut être définie comme lorsque les méthodes et les attributs d'un parent ou d'une classe de base sont copiés / hérités dans un enfant ou une classe dérivée et peuvent être réalisés en utilisant le mot-clé prolongement en javascript.

Si vous lisez à fond cet article, je suis à peu près sûr que vous avez une idée de la façon d'utiliser le mot-clé Extend pour accéder aux méthodes et attributs de la classe parentale en JavaScript. Nous avons expliqué l'héritage, étendre le mot-clé, définir le mot-clé, obtenir un mot clé et quel navigateur prend en charge le mot-clé. L'héritage prototypal, comme indiqué au début de cet article, est obsolète et complexe. Extension est plus simple et similaire à d'autres langues comme Java, C ++, etc.