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

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();
}

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;}

Héritage de sous-classe et classe parent

function Man() {}
extend(Man,Person);

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;}

Le test est le suivant,

var m = new Man();
console.log(m);
console.log(m instanceof Person);

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;
}

É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;}

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);

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!