Heim > Web-Frontend > js-Tutorial > Hauptteil

Detaillierte Erläuterung der Fähigkeiten zur Vererbung von JS-Klassen und zum Prototyp inheritance_javascript

WBOY
Freigeben: 2016-05-16 15:06:05
Original
1416 Leute haben es durchsucht

Das Beispiel in diesem Artikel teilt Ihnen den Code zur js-Klassenvererbung und Prototypenvererbung als Referenz mit. Der spezifische Inhalt ist wie folgt

1.js-Klassenvererbung

/* -- 类式继承 -- */
//先声明一个超类

function Person(name) {
this.name = name;
}
//给这个超类的原型对象上添加方法 getName 
Person.prototype.getName = function() {
return this.name;
}
//实例化这个超
var a = new Person('Darren1')
console.log(a.getName());//Darren1

//再声明类

function Programmer(name, sex) {
//这个类中要调用超类Person的构造函数,并将参数name传给它
Person.call(this, name);
this.sex = sex;
}
//这个子类的原型对象等于超类的实例
Programmer.prototype = new Person();
//因为子类的原型对象等于超类的实例,所以prototype.constructor这个方法也等于超类构造函数,你可以自己测试一下,如果没这一步,console.log(Programmer.prototype.constructor这个是Person超类的引用,所以要从新赋值为自己本身

console.log(Programmer.prototype.constructor);
/*function Person(name) {
this.name = name;
} */

Programmer.prototype.constructor = Programmer;
console.log(Programmer.prototype.constructor);

/*function Programmer(name, sex) {
Person.call(this, name);
this.sex = sex;
} 
*/
//子类本身添加了getSex 方法
Programmer.prototype.getSex = function() {
return this.sex;
}
//实例化这个子类
var _m = new Programmer('Darren2', 'male');
//自身的方法
console.log(_m.getSex());//male
//继承超类的方法
console.log(_m.getName());//Darren2
Nach dem Login kopieren

2.js prototypische Vererbung

/* -- 原型式继承 -- */
//clone()函数用来创建新的类Person对象
var clone = function(obj) {
4
var _f = function() {};
//这句是原型式继承最核心的地方,函数的原型对象为对象字面量
_f.prototype = obj;
return new _f;
}
//先声明一个对象字面量
var Person = {
name: 'Darren',
getName: function() {
return this.name;
}
}
//不需要定义一个Person的子类,只要执行一次克隆即可
var Programmer = clone(Person);
//可以直接获得Person提供的默认值,也可以添加或者修改属性和方法
alert(Programmer.getName())
Programmer.name = 'Darren2'
alert(Programmer.getName())

//声明子类,执行一次克隆即可
var Someone = clone(Programmer);
Nach dem Login kopieren

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für alle beim Erlernen der Javascript-Programmierung hilfreich sein wird.

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