En tant que langage orienté objet (JS est basé sur des objets), il est essentiel de mettre en œuvre l'héritage, mais comme il n'y a pas de concept de classe lui-même, il ne mettra pas en œuvre l'héritage à travers des classes comme un véritable langage de programmation orienté objet, mais peut implémenter l'héritage à travers d'autres méthodes. Il existe de nombreuses façons de mettre en œuvre l'héritage, et les éléments suivants ne sont que quelques-uns.
1. Héritage de la chaîne prototype
fonction personne () {// La fonction héritée est appelée supertype (classe parent, classe de base) this.name = 'mumu'; this.age = '18 '; } Personne.prototype.name = 'Susu'; // Lorsque le nom d'attribut est le même, vous devez être le plus proche, recherchez d'abord dans l'instance, mais allez ensuite au prototype pour trouver Function Worker () {// La fonction héritée est appelée un sous-type (sous-classe, classe dérivée) this.job = 'étudiant'; } Wearch.prototype = new personne (); // hérité par la chaîne prototype, l'instance d'objet instanciée par le supertype est attribuée à l'attribut prototype de la sous-classe var p2 = new Worker (); console.log (p2.Name); Console.log (objet d'instance P2); // Tous les constructeurs sont hérités de l'objetLa clé de la mise en œuvre de l'héritage ci-dessus est: wearch.prototype = new personne (); Faites du prototype des travailleurs une instance de personne et héritez-le via la chaîne prototype.
Remarque: Lorsque vous utilisez des chaînes de prototypes pour implémenter l'héritage, vous ne pouvez pas utiliser les littéraux d'objets pour créer des méthodes prototypes, car cela interrompra la relation et réécrira la chaîne prototype.
Problème d'héritage de la chaîne prototype:
1. Il y a un problème de partage de référence, et ils partagent toujours le même espace, et la sous-classe affectera la classe parent.
fonction personne () {this.bodys = ['eye', 'foot']; } fonction worker () {} worker.prototype = new Person (); var p1 = new Worker (); p1.bodys.push ('hand'); var p2 = new Worker (); console.log (p1.bodys); console.log (p2.bodys);2. Lors de la création d'instances de sous-types, les paramètres ne peuvent pas être passés dans des constructeurs de supertype.
Alors, comment résoudre les deux problèmes de la chaîne prototype? Continuez ensuite à regarder la méthode d'héritage ci-dessous ~
2.
Fonction Person (nom, âge) {this.name = name; this.age = âge; this.bodys = ['Eye', 'Foot']; } Personne.prototype.showname = function () {console.log (this.name); } Function Worker (nom, âge, travail) {Person.Call (ceci, nom, âge); this.job = Job; // sous-classe Ajouter des attributs} var p1 = new Worker ('Mumu', '18', 'Student'); p1.bodys.push ('hand'); var p2 = new Worker (); console.log (p1.name); console.log (p2.bodys); console.log (p1.showname ());Une brève analyse du principe ci-dessus de l'utilisation des constructeurs empruntés: personne.Call (ce, nom, âge); Ce code appelle le constructeur parent, hérite de l'attribut parent et utilise la méthode d'appel pour appeler le constructeur de la personne pour le modifier lorsque la fonction est exécutée. Ici, ce-> nouveau est une méthode déguisée constructeur d'objets de travailleur: transmettre le travailleur à la personne ci-dessus.
Lorsque le type de référence est placé dans le constructeur, il ne sera pas partagé, donc P2 n'est pas affecté.
L'emprunt de la méthode de succession du constructeur résout ici le problème que la chaîne prototype ne peut pas transmettre des paramètres et partager les types de référence.
CONSEILS: Call () et appliquer () Les méthodes peuvent modifier la portée de l'exécution de la fonction, en bref, modifier le contenu pointé par cette fonction.
Call () et appliquer () acceptent deux paramètres: le premier est l'étendue de la fonction qui s'y exécutait, et l'autre est le paramètre passé.
La différence entre l'appel et l'application est la différence de paramètres.
Les paramètres de l'appel doivent être énumérés un par un.
Les paramètres en application doivent être des tableaux ou des objets d'arguments
La question est donc: pourquoi le résultat de P1.Showname () est-il faux? ---- Parce que la méthode d'héritage d'emprunt des constructeurs ne peut qu'hériter les attributs et les méthodes du constructeur. Ici, nous trouvons également un problème d'emprunt des constructeurs.
Remarque: Puisque nous mettons toutes les méthodes dans le constructeur, chaque fois que nous instancons, nous allouerons l'espace mémoire aux ressources de déchets, nous mettons généralement des méthodes dans le prototype et les attributs du constructeur.
Problème d'héritage du constructeur d'emprunt:
Étant donné que l'emprunt d'un constructeur ne peut hériter que des propriétés et des méthodes du constructeur, les méthodes définies dans le prototype de supertype sont invisibles pour la sous-classe, il équivaut donc à n'ayant pas de prototype. En conséquence, toutes les méthodes ne peuvent être définies que dans le constructeur, il n'y a donc pas de multiplexage de fonction.
Alors, comment résoudre le problème causé par l'emprunt des constructeurs? Ensuite, cela dépend de la méthode d'héritage suivante
3. Héritage combiné (héritage pseudo-classique)
Fonction Person (nom, âge) {this.name = name; this.age = âge; } Personne.prototype.showname = function () {console.log (this.name); } Function Worker (nom, âge, travail) {Person.Call (this, nom, âge); // emprunter le constructeur this.job = job; } Wearch.prototype = new Person (); // Prototype Chain héritage var p1 = new Worker ('Mumu', '18', 'Student'); console.log (p1.age); p1.showname ();Héritage combiné: combinant la chaîne prototype avec le constructeur emprunté.
Idée: en utilisant la chaîne de prototype pour implémenter l'héritage des attributs et des méthodes sur le prototype, et en empruntant le constructeur pour mettre en œuvre l'hérédité des attributs d'instance
L'exemple ci-dessus personne.Call (ceci, nom, âge); emprunte le constructeur pour hériter des attributs
Wearch.prototype = new personne (); la chaîne prototype hérite de la méthode, évite les lacunes des deux, combine leurs avantages et devient le modèle d'hérédité le plus utilisé.
Problèmes d'héritage combinés:
Le constructeur de supertype est appelé deux fois, une fois lors de la création d'un prototype de sous-type et de l'autre fois à l'intérieur du constructeur du sous-type.
Pour résoudre ce problème, nous devons utiliser l'héritage de la combinaison parasite.
4. Héritage prototype
Fonction Object (proto) {fonction f () {} f.prototype = proto; retourner nouveau f (); } var personne = {nom: 'mumu', amis: ['xiaxia', 'susu']}; var an autre personne = objet (personne); autre personne.friends.push ('wen'); var encoreanotherperson = objet (personne); autre personne.friends.push ('Tian'); Console.log (Person.friends); // ["Xiaxia", "Susu", "Wen", "Tian"] Console.log (Anotherperson .__ Proto __) // Object {Name: "Mumu", Friends: Array [4]}Une brève analyse: Function Object (Proto) est une fonction de relais temporaire, le paramètre Proto en elle représente un objet à passer. Le constructeur F () est un objet nouvellement créé temporaire, qui est utilisé pour stocker l'objet passé. F.prototype = proto; Attribuez l'instance d'objet à l'objet Prototype du constructeur F et enfin renvoyez l'instance d'objet de l'objet passé. Prototype Héritage ou partage des attributs des types de référence.
5. Héritage parasite
// Temporary Transit Fonction Object (Proto) {fonction f () {} f.prototype = proto; retourner nouveau f (); } // fonction parasite create (proto) {var f = objet (proto); f.love = function () {return this.name; } return f; } var personne = {nom: 'mumu', amis: ['xiaxia', 'susu']}; var an autreau = créer (personne); Console.log (AnotherSerson.Love ()); Héritage de combinaison parasite6. Héritage de combinaison parasite
Fonction Object (proto) {fonction f () {} f.prototype = proto; retourner nouveau f (); } // Fonction de parasite Fonction Create (personne, travailleur) {var f = objet (personne.prototype); // Créer un objet f.constructor = worker; // ajuster le pointeur de construction du prototype et améliorer l'objet Worker.prototype = f; // spécifiez l'objet} fonction personne (nom, âge) {this.name = name; this.age = âge; } Personne.prototype.showname = function () {console.log (this.name); } Function Worker (nom, âge, travail) {Person.Call (ceci, nom, âge); this.job = job; } create (personne, travailleur); // combinaison de parasite héritage var p1 = new personne ('mumu', '18', 'étudiant'); p1.showname ();Cette méthode est également le moyen le plus parfait et le plus idéal de mettre en œuvre des méthodes d'héritage maintenant.
Les notes d'apprentissage de l'héritage JavaScript ci-dessus [doivent lire pour les débutants] est tout le contenu partagé par l'éditeur. J'espère que cela pourra vous donner une référence et j'espère que vous pourrez soutenir Wulin.com plus.