Résumé de l'utilisation de l'héritage dans les compétences javascript_javascript

Les exemples de cet article résument l'utilisation de l'héritage en JavaScript. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Exemple :

Copier le code Le code est le suivant :

/**
* Implémentez la sous-classe pour hériter de la classe parent, mais ne générera pas d'attributs et de méthodes redondants
* @returns {Fonction}
*/
définir(fonction(){
fonction de retour (sous-Type, superType){
var proto = nouvel objet (superType.prototype);
proto.constructor = sousType;
subType.prototype = proto;
};
});
//————————————————————————
définir(fonction(){
fonction ostring(s)
{
this.str = s;
this.length = this.str.length;
>
ostring.prototype.show = fonction(){
alerte(this.str);
};
retourner ostring;
});
//————————————————————————
définir(['hériter', 'ostring'], fonction(hériter, ostring){
fonction wstring(s){
//Utilisez call pour appeler le constructeur de la classe parent
ostring.call(this, s);
this.chlength = 2 * s.length;
>
//Hériter d'autres attributs
hériter(wstring, ostring);
wstring.prototype.add = fonction(w)
{
alert(this.str w);
};
retourner la chaîne ;
});

Regardez à nouveau l'exemple
1. Utilisez la fonction pour implémenter :

Copier le code Le code est le suivant :

fonction Personne(nom) {
This.name = nom;
>
Personne.prototype.getName = function() {
Renvoie this.name;
>
function Auteur(nom, livres) {
This.inherit=personne;
This.inherit(nom);
This.books = livres;
 
>
var au=new Author("dororo","Apprendre beaucoup");
au.nom

Ou équivalent :

Copier le code Le code est le suivant :

fonction Personne(nom) {
This.name = nom;
>
Personne.prototype.getName = function() {
Renvoie this.name;
>
function Auteur(nom, livres) {
Personne.appel(ce, nom);
This.books = livres;
 
>
var au=new Author("dororo","Apprendre beaucoup");
au.getName

Puisqu'il s'agit simplement de l'utiliser comme paramètre, d'appeler le constructeur de la classe parent Person et d'attribuer tous les champs affectés à la classe parent à la sous-classe Author, tous les champs définis (prototype) autres que le constructeur Person de la classe parent ne seront pas utilisé par la sous-classe sera hérité. Ainsi, dans l'exemple ci-dessus, au.getName ne sera pas défini car getName est défini dans l'objet prototype Person.

De plus, le constructeur de la sous-classe doit appeler le constructeur de la classe parent avant de définir son propre domaine, afin d'éviter que la définition de la sous-classe ne soit écrasée par la classe parent. En d’autres termes, le livre d’attributs défini par l’auteur doit être après Person.call, sinon il sera écrasé par les attributs de Person. En même temps, il est préférable de ne pas utiliser prototype pour définir le domaine fonctionnel de la sous-classe dans la sous-classe, car une fois qu'une sous-classe est nouvelle et instanciée, le prototype doit être exécuté, puis le constructeur de la classe parent est appelé, ce qui est également facile à faire. Les attributs de la classe parent sont écrasés.

2. Utiliser un prototype pour mettre en œuvre :

Copier le code Le code est le suivant :

fonction Personne(nom) {
This.name = nom;
>
Personne.prototype.getName = function() {
Renvoie this.name;
>
function Auteur(nom, livres) {
This.books = livres
>
Author.prototype=nouvelle personne(nom);
Author.prototype.constructor=Auteur;
Auteur.prototype.getBooks = function() {
Renvoyez ces.books ;
>
var au1=new Author("dororo1","Apprendre beaucoup");
var au2=new Author("dororo2","En savoir moins");
alert(au1.getName());
alert(au2.getName());

Cette méthode évite le problème de l’impossibilité d’hériter du prototype lors de l’implémentation de la fonction. Parce que l'instance Author.prototype=new Person(name); new Person() appellera le constructeur Person et toutes les propriétés du prototype. Mais l'inconvénient est que Author.prototype a déjà été instancié. Ainsi, lorsqu'une sous-classe est instanciée, tous les types de données non basiques sont des copies de référence. Ainsi, dans l'exemple ci-dessus, la valeur renvoyée par les deux instances au1 et au2 est dororo1.

3. Utilisez le « mélange » pour réaliser

Copier le code Le code est le suivant :

fonction Personne(nom) {
This.name = nom;
>
Personne.prototype.getName = function() {
Renvoie this.name;
>
function Auteur(nom, livres) {
This.base = new Person(name);
for(clé var dans this.base){
          if(!this[key]){
This[key]=this.base[key];
           }
           }
This.book=books;
>
var au1=nouvel Auteur("dororo1","work");
var au2=nouvel Auteur("dororo2","play");
alert(au1.getName());
alert(au2.getName());
au1.book;
au2.book;

C'est une extension qui copie tous les champs de la classe parent vers la classe enfant. Il n’y a aucun problème avec les deux aspects ci-dessus.
Mode combinaison parasite)

L'héritage JS comprend l'héritage d'attributs et l'héritage de méthodes, qui sont implémentés via différentes méthodes.
1. Héritage des attributs

L'héritage des attributs est obtenu en modifiant l'environnement d'exécution de la fonction. La modification de l'environnement d'exécution d'une fonction peut être réalisée à l'aide des méthodes call() et apply().

On crée d'abord une "classe" Animal (car il n'y a pas de notion de classe en JS, voici juste une simulation, il s'agit en fait juste d'un objet Function).

Copier le code Le code est le suivant :

function Animal(typeName) {
//Ajouter un attribut typeName
à l'environnement d'exécution (this) de la méthode actuelle //Mais l'environnement d'exécution (ceci) ne peut être déterminé que lorsque cette fonction est exécutée
this.typeName = typeName;
this.colors = ["red","while"];
>
//Vous souhaitez ajouter deux méthodes (partagées par objet) au prototype de la fonction
Animal.prototype.Shout = function () { alert("Je suis : --" this.typeName);};
Animal.prototype.Eat = function () { alert("Je suis : --" this.typeName) };
//--Définir un lion--"classe" (en fait une fonction)
fonction Lion(tn) {
//--Exécutez la méthode Animal et modifiez l'environnement d'exécution d'Animal en Lion's this
via le premier paramètre de apply // De même, chez Lion, cela ne peut être déterminé que lors de l'exécution
Animal.apply(this,["Lion"]);//--Hérité des attributs variables de la classe parent, c'est nouveau car c'est Lion, c'est Lion
>
Lion.prototype = Animal.prototype; //Héritez la méthode de la classe parent et faites-la - mais ce n'est pas bien écrit. Lorsque la sous-classe ajoute une méthode, la classe parent a également cette méthode.
Lion.prototype.Hunt = fonction () {
alert("Je suis : Lion, je veux chasser~~·~");
>
var amim = nouvel Animal();
aminm.Hunt(); //---Vous pouvez accéder aux méthodes de la sous-classe, ce qui n'est pas bon
//----Alors comment résoudre ce problème ? ? ? ? ? ?
//---Solution : Lors de l'héritage de méthodes, vous pouvez écrire comme ceci :
Lion.prototype = new Animal();//Héritez la méthode de la classe parent et attribuez l'objet Animal au prototype prototype En fait, il a aussi des attributs
. var lion = new Lion(); //En plus de créer, le mot-clé new modifie également l'environnement d'exécution de l'objet Lion en l'objet Lion lui-même
// ---En d'autres termes, une fois new terminé, ceci dans la fonction Lion est la fonction Lion elle-même, puis la fonction Lion

est appelée

Analyser le nouveau mot-clé :

Le nouveau mot-clé est très génial. Dans le code ci-dessus, le nouveau mot-clé a accompli les tâches suivantes :
1) Ouvrez l'espace de stockage pour préparer le stockage des objets Lion
2) Modifiez l'environnement d'exécution de l'objet Lion lui-même pour que celle de la fonction Lion pointe vers l'objet fonction Lion lui-même.
3) Appelez le "constructeur" de la "classe" Lion pour créer un objet Lion
4) Attribuez l'adresse du tas de l'objet fonction Lion à la variable l À ce moment, l pointe vers l'objet fonction Lion
. lion.Shout();
lion.Eat();
Mais ce type d'héritage présente un inconvénient : le constructeur de la classe parent est appelé deux fois, une fois, puis à nouveau.

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.