Detaillierte Erläuterung der JavaScript-Vererbungsmethode (3)

In diesem Artikel wird die JavaScript-Vererbungsmethode weiterhin ausführlich erläutert und hauptsächlich in Form von Code mit Ihnen geteilt. Ich hoffe, dass sie Ihnen helfen kann.

1. Werkzeugfunktion drei

/**
 * @param {Function} subCls
 * @param {Function} superCls
 */
function extend(subCls,superCls) {
subCls.prototype = new superCls();
}

übergeordnete Klasse erben, im Prototypmodus geschrieben, das heißt, alle Attribute und Methoden hängen am Prototyp .

/**
 *  父类Person
 */
function Person(){}
Person.prototype.nationality = 'China';
Person.prototype.getNationality = function() {return this.nationality;}
Person.prototype.setNationality = function(n) { this.nationality = n;}

Unterklassenvererbung und übergeordnete Klasse

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

Nachdem Sie die Eigenschaften und Methoden der übergeordneten Klasse geerbt haben, fügen Sie die eigenen Eigenschaften und Methoden der Unterklasse hinzu

Man.prototype.name = 'jack';
Man.prototype.getName = function() { return this.name;}
Man.prototype.setName = function(n) { this.name=n;}

Der Test lautet wie folgt:

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

Sie können sehen, dass diese Art des Schreibens von Klassen verwendet wird und die Vererbungsmethode den Prototypmechanismus vollständig nutzt.

2, Werkzeugfunktion vier erben

Diese Methode ist derzeit beliebter und die Entwicklung der 51ditu-Website basiert auf diesem Modell.

/**
 * @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;
}

Schreiben Sie die Klasse gemäß der Konstruktor- und Prototyp-Methode, d. h. die Attribute werden an diese und die Methoden an den Prototyp gehängt.

/**
 *  父类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;}

Beachten Sie, dass der Konstruktor der übergeordneten Klasse, der in der Unterklasse Man angezeigt werden soll, das Kopieren der Eigenschaften/Felder der übergeordneten Klasse abgeschlossen hat.

Aufruf erweitern, um eine Instanz von Man zu erstellen

extend(Man,Person);
var m = new Man('USA','jack');
console.log(m)
;m.setName('lily');
console.log(m.name);

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der JavaScript-Vererbungsmethode (3). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!