Cet article décrit le mécanisme d'hérédité JavaScript. Partagez-le pour votre référence. L'analyse spécifique est la suivante:
Il est généralement difficile pour les débutants de comprendre le mécanisme de succession de la langue JavaScript. Il n'a pas le concept de "sous-classe" et "classe parent", et il n'a pas non plus la distinction entre "classe" et "instance". Il s'appuie entièrement sur un modèle très étrange de "chaîne de prototype" pour atteindre l'héritage.
J'ai passé beaucoup de temps à étudier cette partie et à prendre beaucoup de notes. Mais ils sont tous de la mémoire forcée et ne peuvent pas être compris fondamentalement.
1. Comment créer une classe
Supposons qu'il y ait une classe appelée personne comme suit:
Copiez le code comme suit: var personne = fonction (nom, âge) {
this.name = name;
this.age = âge;
}
Personne.prototype.getName = function () {
Renvoie ce.name;
}
Comme mentionné ci-dessus: la personne représente toutes les personnes sur la terre, et tout le monde a ces deux attributs de base: nom et âge; Maintenant, nous voulons mettre en œuvre une classe étudiante, puis nous le savons; Les étudiants sont également une personne et les étudiants ont également des attributs tels que le nom et l'âge; La question est maintenant de savoir comment construire cette relation?
Voyons d'abord comment les langues orientées objet pur le font (comme ActionScript3)
Copiez le code comme suit: Les élèves de classe étendent la personne {}; // c'est très simple, une ligne de code; Pour être plus précis, un mot - extension
2. Comment puis-je le faire si je le change en js
Avant d'expliquer la mise en œuvre du mécanisme d'hérédité JS, comprenons d'abord la chaîne prototype de JS:
La copie de code est la suivante: var person = new Person («Poseed-flw», 21);
personne.getName (); // "Posé-Flw"
Quant à la méthode GetName () ci-dessus, comment est-elle exécutée? Tout d'abord, vous constaterez s'il existe une méthode getName () dans la fonction personne et trouver non; Ensuite, allez à Person.Protype pour rechercher et trouvez-le! Alors appelez-le, et si ce n'est pas le cas? Continuez à suivre la même méthode et recherchez le prototype jusqu'à ce que vous trouviez la méthode ou atteignez le haut de la chaîne du prototype!
Par exemple, il y a maintenant un constructeur appelé chien qui représente le prototype d'un objet chien.
Copiez le code comme suit: Fonction Dog (nom) {
this.name = name;
}
L'utilisation de nouveau pour ce constructeur générera une instance de l'objet chien.
La copie de code est la suivante: var doga = nouveau chien («gros cheveux»);
alerte (doga.name); // gros cheveux
Faites attention à ce mot-clé dans le constructeur, qui représente l'objet d'instance nouvellement créé.
3. Inconvénients du nouvel opérateur
Il existe un inconvénient dans l'utilisation des constructeurs pour générer des objets d'instance, c'est-à-dire la possibilité de partager des attributs et des méthodes.
Par exemple, dans le constructeur de l'objet chien, définissez les espèces d'attribut communes d'un objet d'instance.
Copiez le code comme suit: Fonction Dog (nom) {
this.name = name;
this.species = 'canidae';
}
Ensuite, deux objets d'instance sont générés:
La copie de code est la suivante: var doga = nouveau chien («gros cheveux»);
var dogb = nouveau chien ('eimao');
Les attributs de l'espèce de ces deux objets sont indépendants, en modifiant l'un n'affectera pas l'autre.
La copie de code est la suivante: doga.species = «femelle»;
alerte (dogb.species); // montre la "famille canine", non affectée par Doga
Chaque objet d'instance a sa propre copie de ses propriétés et méthodes. Cela ne parvient pas seulement à partager des données, mais aussi à un énorme gaspillage de ressources.
SO: Idée d'héritage: implémentez le mécanisme d'héritage à travers la chaîne prototype unique de JS!
4. Héritage basé sur la chaîne prototype
1. Héritage et mise en œuvre directes
Copiez le code comme suit: var étudiants = fonction (nom, âge, sid) {
Personne.Call (ceci, nom, âge);
this.sid = sid;
}
Students.prototype = new Person (); // a mis la personne sur la chaîne des étudiants prototypes pour mettre en œuvre le mécanisme de succession
Students.prototype.constructor = étudiants;
Students.prototype.getResults = function () {
// obtient les notes des étudiants
}
Il est nécessaire de ne pas manquer les étudiants.prototype.constructor = la ligne des étudiants! , lors de la définition d'un constructeur, son prototype par défaut est une instance d'objet, puis l'attribut de constructeur du prototype est automatiquement défini sur la fonction elle-même! ! ! Si le prototype est défini manuellement sur un autre objet, le nouvel objet n'aura naturellement pas la valeur du constructeur de l'objet d'origine, donc son attribut de constructeur doit être réinitialisé. comme:
Copiez le code comme suit: var test = function () {
this.time = "maintenant";
}
console.log (test.prototype); // objet {} un objet vide
console.log (test.prototype.constructeur); // function () {this.time = "maintenant";}, et la fonction elle-même
// Si vous modifiez manuellement la propriété prototype du test
Test.prototype = {
Somefunc: function () {
Console.log («Hello World!»);
}
};
console.log (test.prototype.constructeur); // fonction objet () {[code natif]}
// alors vous constaterez que le pointage est complètement faux, donc lorsque vous modifiez manuellement la propriété Prototype, vous devez changer son constructeur pointant;
Après le test ci-dessus, vous saurez pourquoi vous devez modifier la valeur du constructeur.
2. ENCAPLULER la fonction héréditaire
Copiez le code comme suit: fonction extension (sous-classe, superclasse) {
var f = function () {};
F.prototype = superclass.prototype;
sous-classe.prototype = new f ();
sous-class.prototype.constructor = sous-classe;
}
En fait, la fonction de cette fonction n'est qu'une encapsulation du processus d'héritage ci-dessus, et les différences sont:
Il hérite uniquement de l'attribut prototype de la superclasse et n'hérite pas des attributs du constructeur de superclasse;
L'avantage est de réduire les frais généraux du nouveau constructeur!
Bien sûr, le problème ultérieur est que vous ne pouvez pas simplement passer cette fonction pour permettre à la sous-classe de hériter de toutes les propriétés de la superclasse
améliorer:
Copiez le code comme suit: // Continuez à ajouter une ligne de code au constructeur des étudiants:
Personne.Call (ceci, nom, âge);
5. Résumé
En utilisant le principe de la chaîne prototype de JS, nous pouvons facilement mettre en œuvre le mécanisme d'hérédité JS. Bien que ce ne soit pas très strict, mon objectif a été atteint: essayez d'apparaître un code répétitif une fois!
J'espère que cet article sera utile à la programmation JavaScript de tous.