JavaScript实现继承
JavaScript实现继承的方式有三种,第一种,借用构造函数继承,第二种:原型继承。第三种:原型继承和借用构造函数继承的混合使用。
1. 借用构造函数继承: 是子类调用父类的模板,用调用函数的模式,调用父类函数,和变量。
代码:
//继承 模板继承
function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return "方法" + name;
}
}
Person.prototype = {
constructor:Person,//还原构造方法
id:"1",
test:function(){
alert("父类原型方法");
}
}
function Girls(sex,name,age){
Person.call(this,name,age);
this.sex = sex;
}
//Girls.prototype = new Person("fxy","22");
var girls = new Girls("fxy","22","女");
alert("父类属性name:" + girls.name);//
alert("父类属性属性age:" + girls.age);
alert("子类属性sex:" + girls.sex);
alert("父类方法:" + girls.getName());
alert("父类原型属性" + girls.id);//访问不到
girls.test();//父类原型方法//访问不到报错
执行结果如下:
虽然 继承了父类的模板,但是没有继承父类的原型。
2.原型继承
//继承 模板继承
function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return "方法" + name;
}
}
Person.prototype = {
constructor:Person,//还原构造方法
id:"1",
test:function(){
return "test父类原型方法";
}
}
function Girls(sex){
this.sex = sex;
}
Girls.prototype = new Person("fxy","22");
var girls = new Girls("女");
document.write("父类属性name:" + girls.name + "<br/>");
document.write("父类属性属性age:" + girls.age + "<br/>");
document.write("子类属性sex:" + girls.sex + "<br/>");
document.write("父类方法:" + girls.getName() + "<br/>");
document.write("父类原型属性:" + girls.id + "<br/>");
document.write("父类原型方法:" + girls.test() + "<br/>");//父类原型方法
document.write("子类构造函数" + girls.constructor + "<br/>");
可以调用父类的所有属性和方法和原型属性和方法,但是子类的构造函数变成了父类的构造函数。
3.第三种继承 混合继承
//继承 模板继承
function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return "方法" + name;
}
}
Person.prototype = {
constructor:Person,//还原构造方法
id:"1",
test:function(){
return "test父类原型方法";
}
}
function Girls(name,age,sex){
Person.call(this,name,age);
this.sex = sex;
}
Girls.prototype = new Person();
var girls = new Girls("fxy","22","女");
document.write("父类属性name:" + girls.name + "<br/>");
document.write("父类属性属性age:" + girls.age + "<br/>");
document.write("子类属性sex:" + girls.sex + "<br/>");
document.write("父类方法:" + girls.getName() + "<br/>");
document.write("父类原型属性:" + girls.id + "<br/>");
document.write("父类原型方法:" + girls.test() + "<br/>");//父类原型方法
document.write("子类构造函数" + girls.constructor + "<br/>");
可以继承父类模板和父类原型对象
第四种:
集成以上所有优点,回避缺点
function extend(sub,sup){
var f = new Function();
f.prototype = sup.prototype;
sub.prototype = new f();
sub.prototype.constructor = sub;
sub.supClass = sup;
return sub;
}
//继承 模板继承
function Person(name,age){
this.name = name;
this.age = age;
this.getName = function(){
return "方法" + name;
}
}
Person.prototype = {
constructor:Person,//还原构造方法
id:"1",
test:function(){
return "test父类原型方法";
}
}
extend(Girls,Person);
function Girls(name,age,sex){
Girls.supClass.call(this,name,age);//继承模板
this.sex = sex;
}
//Girls.prototype = new Person();
var girls = new Girls("fxy","22","女");
document.write("父类属性name:" + girls.name + "<br/>");
document.write("父类属性属性age:" + girls.age + "<br/>");
document.write("子类属性sex:" + girls.sex + "<br/>");
document.write("父类方法:" + girls.getName() + "<br/>");
document.write("父类原型属性:" + girls.id + "<br/>");
document.write("父类原型方法:" + girls.test() + "<br/>");//父类原型方法
document.write("子类构造函数" + girls.constructor + "<br/>");