Comprendre l'héritage de l'objet JavaScript

Étudions d'abord la question en profondeur. Quel est l'héritage de l'objet JavaScript?

Par exemple, nous avons un constructeur d'un objet "animal".

 fonction animal () {this.type = 'animal'; }

Il existe également un constructeur pour l'objet "Cat".

 fonction cat (name, couleur) {this.name = name; this.color = couleur; }

Nous savons que les chats appartiennent également aux animaux. Si cet objet chat veut hériter des propriétés de l'objet animal, que devons-nous faire?

Reliure du constructeur

L'utilisation de la liaison du constructeur est le moyen le plus simple, utilisez simplement l'appel ou appliquez pour lier l'objet parent à l'objet propre.

 fonction Cat (nom, couleur) {animal.apply (this, arguments); this.name = name; this.color = couleur; } var cat1 = new cat ("haha", 'rouge'); Console.log (Cat1.Type); // animaux

Cependant, cette méthode est relativement rare.

Copier l'héritage

Si toutes les propriétés et méthodes de l'objet parent sont copiées dans l'objet enfant, l'héritage peut également être réalisé.

 fonction extension (enfant, parent) {var p = parent.prototype; var c = child.prototype; for (var i in p) {c [i] = p [i]; } c.uber = p; // Fonction de pont}

Comment utiliser:

 s'étendre (chat, animal); var cat1 = new cat ("haha", "rouge"); alerte (Cat1.Type); // Animal

Héritage prototype (prototype)

Par rapport à la liaison directe ci-dessus, la méthode d'hérédité prototype est plus courante. J'ai brièvement résumé le prototype moi-même.

Chaque fonction a un attribut prototype, qui est une référence à un objet. Lors de la création d'une nouvelle instance à l'aide du nouveau mot clé, cet objet d'instance héritera des attributs et des méthodes de l'objet Prototype.

C'est-à-dire que si l'attribut prototype du constructeur "Cat" est indiqué vers une instance "animal", alors lorsque l'instance d'objet "Cat" est créée, les propriétés et les méthodes de l'objet "animal" sont héritées.

Exemple de succession

 cat.prototype = nouvel animal (); cat.prototype.constructor = cat; var cat1 = new cat ("haha", "rouge"); console.log (cat1.constructor == chat); // true console.log (cat1.type); //Animal

1. Dans la première ligne du code, nous dirigeons l'objet prototype de la fonction CAT à une instance d'un objet animal (qui contient l'attribut type de l'animal).

2. Que signifie la deuxième ligne du code?

1) Tout d'abord, si nous n'ajoutez pas cette ligne de code, exécutez

cat.prototype = nouvel animal ();

console.log (cat.prototype.constructor == animal); //vrai

En d'autres termes, en fait, chaque objet prototype a un attribut de constructeur pointant vers sa fonction de constructeur.

2) Regardons le code suivant

 cat.prototype = nouvel animal (); var cat1 = new Cat ("haha", 'rouge'); Console.log (Cat1.Constructor == Animal); //vrai

D'après ce qui précède, nous voyons que le constructeur de l'instance Cat1 est animal, donc c'est évidemment faux. . . Cat1 est clairement généré par New Cat (), nous devons donc le corriger manuellement. La valeur du constructeur de l'objet Cat.Protype est changée en chat.

3) C'est donc aussi un point auquel nous devrions prêter attention. Si nous remplaçons l'objet Prototype, nous devons corriger manuellement l'attribut constructeur de l'objet Prototype.

o.prototype = {};

o.prototype.constructor = o;

Hériter directement du prototype

Étant donné que dans les objets animaux, les propriétés inchangées peuvent être écrites directement dans Animal.pototype. Laissez ensuite Cat.Protype pointer vers Animal.prototype, qui réalise l'héritage.

Maintenant, réécrivons l'objet animal d'abord comme:

 fonction animal () {} animal.prototype.type = 'animal';

Puis mettez en œuvre l'héritage:

 cat.prototype = animal.prototype; cat.prototype.constructor = cat; var cat1 = new cat ("haha", "rouge"); Console.log (Cat1.Type); // animaux

Par rapport à la méthode précédente, cette méthode semble être plus efficace (aucune instance animale n'est créée), un espace d'économie. Mais est-ce correct? La réponse est incorrecte, continuons à lire.

cat.prototype = animal.prototype;

Cette ligne de code permet à Cat.prototype et animal.prototype de pointer vers le même objet, donc si une certaine propriété de cat.prototype est modifiée, elle se reflétera sur Animal.prototype, ce qui n'est évidemment pas ce que nous voulons voir.

Par exemple, nous courons:

console.log (animal.prototype.constructor == animal) // false

Il s'est avéré être faux, pourquoi? cat.prototype.constructor = cat; Cette ligne modifiera également la propriété constructeur d'Animal.Protype.

Utilisez des objets vides comme intermédiaire

 var f = function () {}; F.prototype = animal.prototype; cat.prototype = new f (); cat.prototype.constructor = cat;

Combinant les deux méthodes ci-dessus, car F est un objet vide, il n'occupe presque pas de mémoire. La modification de l'objet prototype de CAT pour le moment n'affectera pas l'objet prototype de l'animal.

console.log (animal.prototype.constructor == animal); // vrai

Ensuite, nous encapsulons la méthode ci-dessus:

 fonction extension (enfant, parent) {var f = function () {}; F.prototype = parent.prototype; Child.prototype = new f (); Child.prototype.constructor = enfant; Child.uber = parent.prototype; }

Lorsque vous l'utilisez, la méthode est la suivante:

 s'étendre (chat, animal); var cat1 = new cat ("haha", "rouge"); Console.log (Cat1.Type); // Animal

Child.uber = parent.prototype; Cette ligne de code est une fonction de pont, permettant à l'attribut Uber de l'objet enfant de pointer directement vers l'attribut prototype de l'objet parent, ce qui équivaut à ouvrir un canal appelé Uber sur le propre objet, afin que l'instance de l'objet enfant puisse utiliser toutes les propriétés et méthodes de l'objet parent.

Ce qui précède est ma compréhension de l'héritage d'objets JavaScript. J'espère que cela peut vous aider plus ou moins. Merci pour votre lecture.