Heim > Web-Frontend > js-Tutorial > Detaillierte Erläuterung der JavaScript-Vererbungsmethode (3)

Detaillierte Erläuterung der JavaScript-Vererbungsmethode (3)

零到壹度
Freigeben: 2018-03-22 14:29:55
Original
1464 Leute haben es durchsucht

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();
}
Nach dem Login kopieren

ü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;}
Nach dem Login kopieren

Unterklassenvererbung und übergeordnete Klasse

function Man() {}
extend(Man,Person);
Nach dem Login kopieren

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;}
Nach dem Login kopieren

Der Test lautet wie folgt:

var m = new Man();
console.log(m);
console.log(m instanceof Person);
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;}
Nach dem Login kopieren

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);
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage