Explication détaillée du mécanisme d'héritage javascript examples_javascript skills

Les exemples de cet article décrivent le mécanisme d'héritage JavaScript. Partagez-le avec tout le monde 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 d'héritage du langage Javascript. Il n'y a pas de concept de « sous-classe » et de « classe parent », et il n'y a pas de distinction entre « classe » et « instance ». un Un modèle de « chaîne de prototypes » très particulier pour implémenter l'héritage.

J'ai passé beaucoup de temps à étudier cette partie et j'ai pris beaucoup de notes. Mais ce sont tous des souvenirs forcés et ne peuvent être compris fondamentalement.

1. Comment créer une classe

Supposons qu'il existe une classe appelée Personne comme suit :

Copier le code Le code est le suivant :

var Personne = fonction(nom, âge) {
This.name = nom;
Cet.age = âge;
>
Personne.prototype.getName = function() {
Renvoie this.name;
>

Comme ci-dessus : la personne représente tous les habitants de la terre, et chacun a ces deux attributs de base : le nom et l'âge ; comme nom et âge ; La question est maintenant de savoir comment établir cette relation ?
Voyons d'abord comment un langage purement orienté objet le fait (tel que : Actionscrpt3)

Copier le code Le code est le suivant :

Les élèves de la classe étendent Person {} //Très simple, une ligne de code ; plus précis Dites que c'est un mot - étendez

2. Comment faire en passant à js

Avant d'expliquer l'implémentation du mécanisme d'héritage de js, comprenons d'abord la chaîne de prototypes de js :

Copier le code Le code est le suivant :

var person = new Person('Poised-flw', 21);
person.getName(); // "Poised-flw"

Quant à la méthode getName() ci-dessus, comment est-elle exécutée ? Tout d’abord, je vais chercher la méthode getName() dans la fonction Person et constater qu’elle n’existe pas ; puis j’irai sur Person.prototype pour rechercher et trouver qu’elle existe ! Alors appelle-le, et sinon ? Continuez à chercher le long du prototype de la même manière jusqu'à ce que vous trouviez une méthode ou atteigniez le sommet de la chaîne des prototypes !

Par exemple, il existe désormais un constructeur appelé DOG, qui représente le prototype de l'objet chien.

Copier le code Le code est le suivant :

Fonction CHIEN(nom){
　　this.name = nom;
}

L'utilisation de new sur ce constructeur générera une instance de l'objet chien.

Copier le code Le code est le suivant :

　var dogA = new DOG('Big Hair');
alerte(dogA.name); // Da Mao

Faites attention au mot-clé this dans le constructeur, qui représente l'objet instance nouvellement créé.

3. Inconvénients du nouvel opérateur

L'utilisation d'un constructeur pour générer des objets d'instance présente un inconvénient, c'est-à-dire que les propriétés et les méthodes ne peuvent pas être partagées.
Par exemple, dans le constructeur de l'objet DOG, définissez les espèces d'attributs communs d'un objet instance.

Copier le code Le code est le suivant :

Fonction CHIEN(nom){
　　this.name = nom;
　　this.species = 'Canidés';
}

Ensuite, générez deux objets instances :

Copier le code Le code est le suivant :

　var dogA = new DOG('Big Hair');
var dogB = new DOG('二毛');

Les attributs d'espèce de ces deux objets sont indépendants et la modification de l'un n'affectera pas l'autre.

Copier le code Le code est le suivant :

dogA.species = 'Feline';
alert(dogB.species); // Afficher "canin", non affecté par dogA

Chaque objet d'instance possède sa propre copie de propriétés et de méthodes. Non seulement cela ne permet pas le partage des données, mais cela constitue également un énorme gaspillage de ressources.

Donc : L'idée de l'héritage : Implémentez le mécanisme d'héritage via la chaîne de prototypes unique de js !

4. Héritage basé sur une chaîne de prototypes

1. Implémentation de l'héritage direct

Copier le code Le code est le suivant :

var Students = function(name, age, sid) {
Person.call(ce, nom, âge);
This.sid = sid;
>
Students.prototype = new Person(); //Mettez Person sur la chaîne de prototypes d'étudiants pour implémenter le mécanisme d'héritage
Students.prototype.constructor = Étudiants;
Students.prototype.getResults = function() {
// Obtenez les scores des élèves
>

Assurez-vous de ne pas manquer la ligne Students.prototype.constructor = Students ! , lors de la définition d'un constructeur, son prototype par défaut est une instance d'objet, puis la propriété constructeur du prototype est automatiquement définie 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 de constructeur de l'objet d'origine, sa propriété de constructeur doit donc être réinitialisée. Tel que :

Copier le code Le code est le suivant :

var Test = function() {
This.time = "maintenant";
>
console.log(Test.prototype); // Objet {} un objet vide
console.log(Test.prototype.constructor); // function() {this.time = "now";}, et la fonction elle-même
// Si vous modifiez manuellement l'attribut prototype de Test
Test.prototype = {
SomeFunc : function() {
console.log('Bonjour tout le monde !');
>
};
console.log(Test.prototype.constructor); // function Object() { [code natif] }
// Ensuite, vous constaterez que vous l'avez complètement mal pointé, donc lorsque vous modifiez manuellement l'attribut du prototype, vous devez modifier son pointeur de constructeur

 ; Après le test ci-dessus, vous saurez pourquoi la valeur du constructeur doit être modifiée.

2. Encapsuler les fonctions héritées étendre

Copier le code Le code est le suivant :

function extend(subClass, superClass) {
var F = fonction() {};
F.prototype = superClass.prototype;
subClass.prototype = nouveau F();
​ subClass.prototype.constructor = subClass;
>

En fait, la fonction de cette fonction n'est qu'une encapsulation du processus d'héritage ci-dessus. Les différences sont :
. Il hérite uniquement de l'attribut prototype de superClass et n'hérite pas des attributs du constructeur superClass ;
L’avantage est que cela réduit le coût de création d’un nouveau constructeur !
Bien sûr, le problème qui en découle est que la sous-Classe ne peut pas hériter de tous les attributs de la superClass via cette seule fonction
Améliorations :

Copier le code Le code est le suivant :

// Continuer à ajouter une ligne de code dans le constructeur Etudiants :
Person.call(ce, nom, âge);

5.Résumé

En utilisant le principe de chaîne de prototypes de js, nous pouvons facilement implémenter le mécanisme d'héritage de js Bien qu'il ne soit pas très strict, mon objectif a été atteint : le code répété doit apparaître une fois autant que possible !

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.