Explication détaillée de l'héritage dans les compétences JavaScript_javascript

Le concept d'héritage js

Les deux méthodes d'héritage suivantes sont couramment utilisées en js :

Héritage de chaîne de prototypes (héritage entre objets)
Héritage de classe (héritage entre constructeurs)
Puisque js n'est pas un langage véritablement orienté objet comme Java, js est basé sur des objets et n'a aucun concept de classes. Par conséquent, si vous souhaitez implémenter l'héritage, vous pouvez utiliser le mécanisme prototype de js ou les méthodes apply et call

Dans les langages orientés objet, nous utilisons des classes pour créer un objet personnalisé. Cependant, tout en js est un objet, alors comment créer un objet personnalisé ? Cela nécessite l'utilisation du prototype js :

Nous pouvons simplement considérer le prototype comme un modèle. Les objets personnalisés nouvellement créés sont tous des copies de ce modèle (prototype) (en fait, pas des copies mais des liens, mais ce lien est invisible. Nouveau Il y a un pointeur __Proto__ invisible à l'intérieur de l'instancié. objet, pointant vers l’objet prototype).

JS peut simuler les fonctions des classes via des constructeurs et des prototypes. De plus, l'implémentation de l'héritage de classe js repose également sur la chaîne de prototypes.

Héritage prototypique et héritage de classe

L'héritage classique appelle le constructeur du supertype à l'intérieur du constructeur du sous-type.
L'héritage de classe strict n'est pas très courant et est généralement utilisé en combinaison :

Copier le code Le code est le suivant :

fonction Super(){
This.colors=["rouge","bleu"];
>

fonction Sub(){
Super.call(this);
>

L'héritage prototypique consiste à créer de nouveaux objets à l'aide d'objets existants et à faire pointer le prototype de la sous-classe vers la classe parent, ce qui équivaut à rejoindre la chaîne de prototypes de la classe parent

Héritage de la chaîne prototype

Pour que la sous-classe hérite des attributs (y compris les méthodes) de la classe parent, vous devez d'abord définir un constructeur. Ensuite, affectez la nouvelle instance de la classe parent au prototype du constructeur. Le code est le suivant :

Copier le code Le code est le suivant :

<script><br> Fonction Parent(){<br> This.name = 'mike';<br> > <p> fonction Enfant(){<br> Cet.age = 12;<br> ><br> Child.prototype = new Parent();//Child hérite de Parent et forme une chaîne à travers le prototype</p> <p> var test = new Child();<br> alerte(test.age);<br> ​​ alert(test.name);//Obtenir les attributs hérités<br> //Continuer l'héritage de la chaîne de prototypes<br> Function Brother(){ //brother construction<br> Ce.poids = 60;<br> ><br> Brother.prototype = new Child();//Continuer l'héritage de la chaîne du prototype<br> var frère = nouveau frère();<br> alert(brother.name);//Hérite du parent et de l'enfant, fait apparaître le micro<br> ​​ alerte(brother.age);//pop-up 12<br> </script>

L'héritage de chaîne de prototype ci-dessus manque un lien, c'est-à-dire Object. Tous les constructeurs héritent de Object. L'héritage des objets se fait automatiquement et ne nécessite pas d'héritage manuel. Alors, quelle est leur affiliation ?

Déterminer la relation entre le prototype et l'instance

La relation entre les prototypes et les instances peut être déterminée de deux manières. Méthodes opérateur instanceof et isPrototypeof() :

Copier le code Le code est le suivant :

alerte (instance frère d'objet) // vrai
alert(test instanceof Brother);//false, test est la super classe de brother
alert(frère instanceof Child);//true
alert(instance frère de Parent);//true

Tant qu'il s'agit d'un prototype qui apparaît dans la chaîne de prototypes, on peut dire qu'il s'agit du prototype de l'instance dérivée de la chaîne de prototypes. Par conséquent, la méthode isPrototypeof() retournera également true

.

En js, la fonction héritée est appelée le super type (la classe parent, la classe de base est également acceptable), et la fonction héritée est appelée le sous-type (sous-classe, classe dérivée). L'utilisation de l'héritage prototypique pose deux problèmes principaux :
Premièrement, le remplacement littéral du prototype rompra la relation et utilisera le prototype du type référence, et le sous-type ne pourra pas transmettre de paramètres au supertype.

Les pseudo-classes résolvent le problème du partage de références et de l'impossibilité de transmettre des paramètres de super types. Nous pouvons utiliser la technologie des "constructeurs empruntés"

.

Constructeur d'emprunt (héritage de classe)

Copier le code Le code est le suivant :

<script><br> Fonction Parent(âge){<br> This.name = ['mike','jack','smith'];<br> Cet.age = âge;<br> > <p> fonction Enfant(âge){<br>         Parent.call(this,age);<br> ><br> var test = new Enfant(21);<br> alerte(test.age);//21<br> ​​ alerte(test.name);//mike,jack,smith<br> Test.name.push('bill');<br> ​​ alert(test.name);//mike,jack,smith,bill<br> </script>

Bien que l'emprunt de constructeurs résolve les deux problèmes que nous venons de mentionner, sans prototype, la réutilisation est impossible, nous avons donc besoin d'une chaîne de prototypes pour emprunter des constructeurs. Ce modèle est appelé héritage combiné .

Héritage combiné

Copier le code Le code est le suivant :

<script><br> Fonction Parent(âge){<br> This.name = ['mike','jack','smith'];<br> Cet.age = âge;<br> ><br> Parent.prototype.run = fonction () {<br>           return this.name ' sont tous les deux' this.age;<br> };<br> Fonction Enfant(âge){<br> ​​​ Parent.call(this,age);//Usurpation d'identité d'objet, transmission de paramètres au super type<br> ><br> Child.prototype = new Parent();//Héritage de la chaîne de prototypes<br> var test = new Child(21);//Vous pouvez également écrire new Parent(21)<br> alert(test.run());//mike,jack,smith sont tous les deux21<br> </script>

L'héritage combiné est une méthode d'héritage couramment utilisée. L'idée derrière elle est d'utiliser la chaîne de prototypes pour hériter des propriétés et des méthodes du prototype, et d'emprunter des constructeurs pour hériter des propriétés d'instance. De cette manière, la réutilisation des fonctions est réalisée en définissant des méthodes sur le prototype, et chaque instance est garantie d'avoir ses propres attributs.

Utilisation de call() : Appelez une méthode d'un objet et remplacez l'objet actuel par un autre objet.

Copier le code Le code est le suivant :

call([thisObj[,arg1[, arg2[, [,.argN]]]]])

Héritage prototype

Ce type d'héritage utilise des prototypes pour créer de nouveaux objets basés sur des objets existants sans créer de types personnalisés. C'est ce qu'on appelle l'héritage prototypique

.

Copier le code Le code est le suivant :

<script><br> Fonction obj(o){<br>           fonction F(){}<br>             F.prototype = o;<br>            renvoie le nouveau F();<br> ><br> var boîte = {<br> nom : 'trigkit4',<br> arr : ['frère','soeur','baba']<br> };<br> var b1 = obj(boîte);<br> ​​ alerte(b1.name);//trigkit4 <p> b1.name = 'mike';<br> alerte(b1.name);//mike</p> <p> alert(b1.arr);//frère,soeur,baba<br> b1.arr.push('parents');<br> alert(b1.arr);//frère,soeur,baba,parents</p> <p> var b2 = obj(boîte);<br> ​​ alerte(b2.name);//trigkit4<br> alert(b2.arr);//frère,soeur,baba,parents<br> </script>

L'héritage prototypique crée d'abord un constructeur temporaire à l'intérieur de la fonction obj(), puis utilise l'objet entrant comme prototype de ce constructeur, et renvoie enfin une nouvelle instance de ce type temporaire.

Héritage parasitaire

Cette méthode d'héritage combine le modèle d'usine de prototype dans le but d'encapsuler le processus de création.

Copier le code Le code est le suivant :

<script><br> Fonction créer(o){<br> var f= obj(o);<br>             f.run = function () {<br>                 return this.arr;//De même, la référence sera partagée <br>         };<br>          return f;<br> ><br> </script>

Petits problèmes d'héritage combiné

L'héritage combiné est le modèle d'héritage le plus couramment utilisé dans js, mais le supertype de l'héritage combiné sera appelé deux fois lors de l'utilisation ; une fois lors de la création du sous-type, et l'autre fois dans le constructeur du sous-type

Copier le code Le code est le suivant :

<script><br> Fonction Parent(nom){<br> This.name = nom;<br> This.arr = ['frère','soeur','parents'];<br> > <p> Parent.prototype.run = fonction () {<br>          return this.name;<br> };</p> <p> fonction Enfant(nom,âge){<br>         Parent.call(this,age);//Deuxième appel<br> Cet.age = âge;<br> ></p> <p> Child.prototype = new Parent();//Premier appel<br> </script>

Le code ci-dessus est l'héritage de combinaison précédent, donc l'héritage de combinaison parasite résout le problème de deux appels.

Héritage combinatoire parasitaire

Copier le code Le code est le suivant :

<script><br> Fonction obj(o){<br>          fonction F(){}<br>           F.prototype = o;<br>           renvoie le nouveau F();<br> ><br> Fonction créer(parent,test){<br>         var f = obj(parent.prototype);//Créer un objet<br>             f.constructor = test;//Objet d'amélioration<br> > <p> fonction Parent(nom){<br> This.name = nom;<br> This.arr = ['frère','soeur','parents'];<br> ></p> <p> Parent.prototype.run = fonction () {<br>          return this.name;<br> };</p> <p> fonction Enfant(nom,âge){<br>          Parent.call(this,name);<br> Cet.age =age;<br> ></p> <p>heritPrototype(Parent,Child);//L'héritage s'obtient via ici</p> <p> var test = new Child('trigkit4',21);<br> Test.arr.push('neveu');<br> alerte(test.arr);//<br> alert(test.run());//Seule la méthode est partagée</p> <p> var test2 = new Child('jack',22);<br> alert(test2.arr);//Résolution du problème de devis<br> </script>

appelez et postulez

Les fonctions globales apply et call peuvent être utilisées pour changer le pointeur de this dans la fonction, comme suit :

Copier le code Le code est le suivant :

//Définir une fonction globale
Fonction foo() {
console.log(this.fruit);
>

// Définir une variable globale
var fruit = "pomme";
// Personnaliser un objet
var pack = {
        fruit : "orange"
};

// Équivalent à window.foo();
foo.apply(window); // "pomme", pour le moment, cela est égal à window
// Ceci dans foo à ce moment === pack
foo.apply(pack); // "orange"