Analyse approfondie de la programmation orientée objet JavaScript

2. Programmation orientée objet JavaScript: Héritage des constructeurs

Cette section introduit principalement comment générer une instance qui "hérite" de plusieurs objets.

Par exemple, il existe maintenant un constructeur pour un objet "animal".

 fonction animal () {this.species = "animal"; }

Il y a aussi un constructeur d'objets "chat",

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

Comment les "chats" peuvent-ils hériter des animaux "?

1. Liaison du constructeur

Le moyen le plus simple consiste probablement à utiliser l'appel ou à appliquer la méthode pour lier le constructeur de l'objet parent à l'objet enfant, c'est-à-dire ajouter une ligne au constructeur de l'objet enfant:

 fonction Cat (nom, couleur) {animal.apply (this, arguments); this.name = name; this.color = couleur; } var cat1 = nouveau chat ("gros cheveux", "jaune"); alerte (Cat1.species); // Animal

2. Mode prototype

Une approche plus courante consiste à utiliser l'attribut prototype.

Si l'objet prototype du "chat" pointe vers une instance d'animal, alors toutes les instances de "chat" peuvent hériter de l'animal.

 Cat.prototype = nouvel animal (); Cat.prototype.constructor = cat; var cat1 = nouveau chat ("gros cheveux", "jaune"); alerte (Cat1.species); // Animal

Dans la première ligne du code, nous dirigeons l'objet Prototype Cat vers une instance d'animal.

1.Cat.prototype = new animal ();

Il équivaut à supprimer complètement la valeur d'origine de l'objet Prototype, puis à attribuer une nouvelle valeur. Mais que signifie la deuxième ligne?

1.CAT.prototype.constructor = Cat;

Il s'avère que tout objet prototype a un attribut constructeur pointant vers sa fonction de constructeur. En d'autres termes, la propriété constructeur de l'objet Cat.Protype pointe vers Cat.

Nous avons supprimé la valeur d'origine de cet objet prototype à l'étape précédente, de sorte que le nouvel objet prototype n'a pas l'attribut de constructeur, nous devons donc l'ajouter manuellement, sinon il y aura des problèmes avec la "chaîne d'hérédité" suivante. C'est ce que signifie la deuxième ligne.

En bref, c'est un point très important, et vous devez le suivre lors de la programmation. Tout ce qui suit suit: Si l'objet prototype est remplacé,

1.O.Prototype = {};

Ensuite, l'étape suivante doit être d'ajouter l'attribut de constructeur à l'objet du nouvel prototype et de renvoyer cet attribut à la fonction du constructeur d'origine.

1.O.Prototype.Constructor = O;

3. Hériter directement du prototype

Étant donné que dans les objets animaux, les propriétés inchangées peuvent être écrites directement sur Animal.pototype. Par conséquent, nous pouvons également laisser Cat () sauter animal () et hériter directement un animal.pototype.

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

1.Function Animal () {}

2.animal.prototype.species = "animal";

Ensuite, pointez l'objet prototype du chat et pointez l'objet prototype de l'animal, de sorte que l'héritage est terminé.

 Cat.prototype = animal.prototype; Catcat.prototype.constructor = chat; var cat1 = nouveau chat ("gros cheveux", "jaune"); alerte (Cat1.species); // animaux

Par rapport à la première méthode, l'avantage est qu'il est relativement efficace (pas besoin d'exécuter et de créer des instances animales) et est plus d'économie de mémoire. L'inconvénient est que CAT.prototype et animal.prototype pointent désormais vers le même objet, donc toute modification de Cat.Protype sera reflétée dans Animal.prototype.

Ainsi, le code ci-dessus est en fait problématique. Veuillez voir la deuxième ligne

1.CAT.prototype.constructor = Cat;

Cette phrase a en fait changé l'attribut constructeur de l'objet Animal.Prototype!

1.Alert (animal.prototype.constructor); // Chat

4. Utilisez des objets vides comme intermédiaire

Étant donné que "l'hérédité directe du prototype" présente les inconvénients ci-dessus, un objet vide peut être utilisé comme intermédiaire.

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

F est un objet vide, donc il n'occupe presque pas de mémoire. À l'heure actuelle, la modification de l'objet Prototype CAT n'affectera pas l'objet Prototype Animal.

1.Alert (animal.prototype.constructor); // Animal

5. Fonction d'encapsulation du mode prototype

Nous encapsulons la méthode ci-dessus en une fonction pour une utilisation facile.

 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 = nouveau chat ("gros cheveux", "jaune"); alerte (Cat1.species); // Animal

Cette fonction étendue est la méthode de la façon dont la bibliothèque YUI met en œuvre l'héritage.

Aussi, laissez-moi l'expliquer. La dernière ligne du corps de fonction

1.child.uber = parent.prototype;

Cela signifie définir un attribut Uber pour l'objet enfant, qui pointe directement vers l'attribut prototype de l'objet parent. Cela équivaut à ouvrir un canal sur l'objet enfant et à appeler directement la méthode de l'objet parent. Cette ligne est placée ici juste pour atteindre l'exhaustivité des successions et est purement une propriété de rechange.

6. Copier l'héritage

Ce qui précède consiste à utiliser des objets prototypes pour implémenter l'héritage. Nous pouvons également modifier notre réflexion et utiliser la méthode "Copie" pour réaliser l'héritage. En termes simples, si toutes les propriétés et méthodes de l'objet parent sont copiées dans l'objet enfant, ne peut pas être atteinte?

Tout d'abord, mettez toutes les propriétés inchangées de l'animal sur son objet prototype.

1.Function Animal () {}

2.animal.prototype.species = "animal";

Ensuite, écrivez une autre fonction pour atteindre l'objectif de la copie des biens.

 fonction extension2 (enfant, parent) {var p = parent.prototype; var c = child.prototype; for (var i in p) {c [i] = p [i]; } c.uber = p; }

La fonction de cette fonction est de copier les propriétés de l'objet prototype de l'objet parent à l'objet prototype de l'objet enfant un par un.

Lorsque vous l'utilisez, écrivez ceci:

 Extension2 (chat, animal); var cat1 = nouveau chat ("gros cheveux", "jaune"); alerte (Cat1.species); // Animal

L'analyse approfondie de l'article ci-dessus de la programmation orientée objet en JavaScript est tout le contenu que je partage avec vous. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.