Maison > interface Web > js tutoriel > le corps du texte

Explication détaillée de la méthode d'héritage JavaScript (3)

零到壹度
Libérer: 2018-03-22 14:29:55
original
1413 Les gens l'ont consulté

Cet article continue d'expliquer en détail la méthode d'héritage JavaScript, en la partageant principalement avec vous sous forme de code, dans l'espoir d'aider tout le monde.

1. Hériter de la fonction outil trois

/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls,superCls) {
subCls.prototype = new superCls();
}
Copier après la connexion

classe parent, écrite en mode prototype, c'est-à-dire que les attributs et les méthodes sont tous accrochés au prototype. .

/**
 *  父类Person
 */
function Person(){}
Person.prototype.nationality = 'China';
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}
Copier après la connexion

Héritage de sous-classe et classe parent

function Man() {}
extend(Man,Person);
Copier après la connexion

Après avoir hérité des propriétés et méthodes de la classe parent, ajoutez les propres propriétés et méthodes de la sous-classe

Man.prototype.name = 'jack';
Man.prototype.getName = function() { return this.name;}
Man.prototype.setName = function(n) { this.name=n;}
Copier après la connexion

Le test est le suivant,

var m = new Man();
console.log(m);
console.log(m instanceof Person);
Copier après la connexion

Vous pouvez voir cette façon d'écrire les classes, et la méthode d'héritage utilise entièrement le mécanisme du prototype.

2, hériter de la fonction outil quatre

Cette méthode est actuellement plus populaire, et le développement du site 51ditu est basé sur ce modèle.

/**
 * @param {Function} subCls 子类
 * @param {Function} superCls 父类
 */
function extend(subCls,superCls) {
//暂存子类原型
var sbp = subCls.prototype;
//重写子类原型--原型继承
subCls.prototype = new superCls();
//重写后一定要将constructor指回subCls
subCls.prototype.constructor = subCls;
//还原子类原型
for(var atr in sbp) {
subCls.prototype[atr] = sbp[atr];
}
//暂存父类
subCls.supr = superCls;
}
Copier après la connexion

Écrivez la classe selon la méthode constructeur + prototype, c'est-à-dire que les attributs sont accrochés à cela et les méthodes sont accrochées au prototype.

/**
 *  父类Person
 */
function Person(nationality){
this.nationality = nationality;
}
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}
/**
 *  子类Man
 */
function Man(nationality,name) {
Man.supr.call(this,nationality); //很重要的一句,调用父类构造器
this.name = name;
}
Man.prototype.getName = function() {return this.name;}
Man.prototype.setName = function(n) {this.name=n;}
Copier après la connexion

Notez que le constructeur de la classe parent à afficher dans la sous-classe Man a terminé la copie des propriétés/champs de la classe parent.

étendre l'appel pour créer une instance de Man

extend(Man,Person);
var m = new Man('USA','jack');
console.log(m)
;m.setName('lily');
console.log(m.name);
Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!