Avant de commencer le code, vous devez clairement comprendre quel est le but de l'héritage et les avantages qui peuvent apporter. D'une manière générale, lors de la conception de la classe, nous espérons réduire le code en double et affaiblir le couplage entre les classes. Il est difficile de prendre soin des deux. Selon notre compréhension de l'héritage de la langue du visage à objet, l'héritage apportera un couplage fort direct, mais en raison de sa flexibilité unique, JS peut concevoir un couplage solide et un code de couplage faible, une efficacité élevée et un code inefficace. Et ce que vous utilisez dépend de la situation.
Ce qui suit fournit trois méthodes d'héritage dans JS: l'héritage de la classe, l'héritage du prototype et le mélange. Voici une brève description de l'héritage de la classe.
Héritage de la forme de classe.
La réalisation de l'héritage du type JS dépend de la chaîne prototype. Qu'est-ce que la chaîne d'origine? L'objet dans JS a une prototy d'attribut.
Il semble avoir une impression de prototype.
Copier le code du code comme suit:
var personne = fonction () {
this.name = "liyatang";
};
Personne.prototype = {
// Vous pouvez fournir la fonction de base de la personne ici
getName: function () {
Renvoie ce.name;
}
}
Nous mettons la fonction de base de la classe dans la propriété Prototype, indiquant que la référence de l'objet personne a la fonction xxx.
Après avoir compris le prototype, vous devez comprendre ce qu'est la chaîne d'origine. Lorsqu'un membre (attribut ou méthode) de l'objet en visite, si le membre n'est pas vu dans l'objet actuel, JS le trouvera dans l'objet mentionné dans l'attribut Prototype. S'il n'est pas trouvé, il reviendra à non défini.
Alors, quelles invites la chaîne d'origine nous donne-t-elle? Il est facile de penser que la chaîne principale signifie pour permettre à une classe de hériter d'une autre classe. Cela lie les membres de la classe parent à la sous-classe, car ils trouveront la classe parent lorsqu'ils ne seront pas trouvés sur la sous-classe. (Les deux paragraphes ci-dessus des mots ne sont pas rigoureux, décrits uniquement en mots faciles à comprendre)
Ci-dessous, nous avons besoin d'une classe chinoise, et nous devons hériter des noms et obtenir des membres de la classe de personne.
Copier le code du code comme suit:
Var chinois = fonction (nom, nation) {
// Héritage, vous devez appeler le constructeur de la classe parent, vous pouvez l'appeler avec appel, ce point vers le chinois
// personne peut appeler les membres de la personne sur cette portée
Personne.Call (ceci, nom);
this.Nation = National;
};
Chinois.prototype = personne.prototype;
// Ce n'est pas la même chose qu'auparavant, car l'attribut prototype est couvert
//Chinese.prototype = {
// getNation: function () {{
// Renvoie ce.Nation;
//}
//};
// La voie à l'avenir devra être ajoutée comme celle-ci
Chinois.prototype.getNation = function () {
Renvoyez ce.Nation;
};
La relation d'héritage est établie, nous l'appelons comme ça
Copier le code du code comme suit:
var c = nouveau chinois ("liyatang", "Chine");
alerte (c.getName ());
Ainsi, l'héritage du type est terminé. Est-ce vraiment fait? Utilisez Firebug pour déclencher des points en alerte, et vous constaterez que la personne d'origine. Le prototype a été modifié et a ajouté la méthode GetNation.
En effet, le code ci-dessus chinois.prototype = personne.prototype; Ce n'est pas toléré en soi, et ce n'est pas l'effet que nous voulons.
Nous pouvons affaiblir le couplage dans un autre objet ou instance.
Copier le code du code comme suit:
//
//Chinese.prototype = new personne ();
// le deuxième type
// var f = function () {};
//F.prototype = personne.prototype;
//Chinese.prototype = f.prototype;
Quelles sont les différences entre ces deux méthodes? Ajoutez une fonction vide F dans le deuxième type, qui peut éviter une instance de la création d'une classe parent, car la classe parent peut être grande, et la fonction de structure de classe parent aura certains effets secondaires, ou un grand nombre de calculs sera effectué. Recommande donc la deuxième méthode.
À ce stade, c'est fini, pas encore! Il existe des attributs des attributs des attributs de l'objet, qui préserve une référence à une fonction d'une instance d'objet spécifique. Selon cette déclaration, Chiese.prototype.Constructor devrait être égal au chinois, ce qui n'est en fait pas.
Lorsque la chaîne prototype de la chiese a été mise en place avant les souvenirs, nous avons couvert la personne. Prototype de chiese.prototype. Donc, à ce moment, Chiese.prototype.Contructor est personne. Nous devons également ajouter le code suivant
Copier le code du code comme suit:
// il n'est pas nécessaire d'étudier les conditions IF ici, connaissant chinois.prototype.constructor = chinois
If (chinois.prototype.constructor == object.prototype.constructor) {
Chinois.prototype.constructor = chinois;
}
Se transformer en tout le code comme suit
Copier le code du code comme suit:
var personne = fonction (nom) {
this.name = name;
};
Personne.prototype = {
getName: function () {
Renvoie ce.name;
}
};
Var chinois = fonction (nom, nation) {
Personne.Call (ceci, nom);
this.Nation = National;
};
var f = function () {};
F.prototype = personne.prototype;
Chinois.prototype = f.prototype;
If (chinois.prototype.constructor == object.prototype.constructor) {
Chinois.prototype.constructor = chinois;
}
Chinois.prototype.getNation = function () {
Renvoyez ce.Nation;
};
var c = nouveau chinois ("liyatang", "Chine");
alert (c.getName ());
Si vous pouvez mettre le code d'héritage dans une fonction, il est pratique pour le code à réutiliser, et le dernier tri du code est le suivant
Copier le code du code comme suit:
Fonction extension (sous-classe, superclass) {{{{
var f = function () {};
F.prototype = superclass.prototype;
sous-classe.prototype = new f ();
sous-class.prototype.constructor = sous-classe;
subsals.superclass = superclass.prototype;
If (superclass.prototype.constructor == object.prototype.constructor) {
superclass.prototype.constructor = superclass;
}
}
var personne = fonction (nom) {
this.name = name;
};
Personne.prototype = {
getName: function () {
Renvoie ce.name;
}
};
Var chinois = fonction (nom, nation) {
Personne.Call (ceci, nom);
this.Nation = National;
};
étendre (chinois, personne);
Chinois.prototype.getNation = function () {
Renvoyez ce.Nation;
};
var c = nouveau chinois ("liyatang", "Chine");
alert (c.getName ());
Modification après publication:
Sous les commentaires au premier étage, j'ai une nouvelle vue de cette fonction étendue. Deux méthodes ont été proposées lors de la discussion sur la façon de définir la chaîne d'origine
Copier le code du code comme suit:
//
//Chinese.prototype = new personne ();
// le deuxième type
// var f = function () {};
//F.prototype = personne.prototype;
//Chinese.prototype = f.prototype;
Bien que la deuxième façon de réduire la fonction de construction de la classe parent, le Person.Call (ce nom) est utilisée lors de la conception de la classe chinoise;
Cependant, dans la première méthode, vous pouvez réduire la personne. Peut souhaiter mettre ce code de fonction dans Extend. Juste écrire
Chinois.prototype = new personne ();
Mais l'oubli est que chinois.prototype = new personne (); La réponse est erronée! De toute évidence, la nouvelle personne () doit passer un paramètre de nom. Nous ne pouvons pas faire cette partie de la fonction Extension, nous devons donc appeler le constructeur de la classe parentale dans la classe chinoise. Ceci est également conforme aux idées orientées objet.
Par conséquent, il est toujours recommandé d'utiliser la deuxième méthode.
La première fois que j'ai écrit sur les articles techniques de cette manière, en gros, il est pavé selon ma propre pensée.