js继承的5中方式
1:原型继承
// 创建一个人的函数为A
function pelpeoA(name,age){
//公有属性
this.name=name;
this.age=age;
}
//共有属性
pelpeoA.prototype.eat=function(){
console.log('我喜欢吃雪梨')
}
var newpelpeoA=new pelpeoA('我是哥哥','今年18'); //实例化
//B继承A所有的属性和方法,共有去继承A的属性.
function pelpeoB(color){
this.color=color
}
pelpeoB.prototype=new pelpeoA('我是弟弟','今年16');//通过原型来继承
// pelpeoB.prototype.eat=function(){
// console.log('我喜欢吃凤梨');
// }
var newpelpeoB=new pelpeoB('我是白的');
console.log(newpelpeoA);
console.log(newpelpeoB);
:原型继承的缺点;
1:不可以传参
2:属性都是共有继承,一个改变了,另外一个也会跟着改变
2:构造函数继承
1:优点
1:可以传参
2:公有属性公有继承
2:缺点
1;体现不出继承性
2:共有属性得不到继承
// 构造函数继承
function pelpeoA(name,age){
//公有属性
this.name=name;
this.age=age;
}
//共有属性
pelpeoA.prototype.eat=function(){
console.log('我喜欢吃雪梨')
}
var newpelpeoA=new pelpeoA('我是哥哥','今年18'); //实例化
//B要去继承A所有的属性和方法 ,共有去继承A的属性
function pelpeoB(color,name,age){
this.color=color;
pelpeoA.call(this,name,age) //共有属性共有继承
}
//可以传参
var newpelpeoB=new pelpeoB('我是白的','我是弟弟',16); 共有属性得不到继承
console.log(newpelpeoB)
3:组合继承
原型继承和构造继承共同继承
function pelpeoA(name,age){
//公有属性
this.name=name;
this.age=age;
}
//共有属性
pelpeoA.prototype.eat=function(){
console.log('我喜欢吃雪梨')
}
var newpelpeoA=new pelpeoA('我是哥哥','今年18'); //实例化
//B要去继承A所有的属性和方法 ,共有去继承A的属性
function pelpeoB(color,name,age){
this.color=color;
pelpeoA.call(this,name,age) //共有属性共有继承
}
//可以传参
//重新指向一个新的地址后,contructor就消失了,需要手动添加,指向构造函数本身
pelpeoB.prototype=new pelpeoA();//原型继承
var newpelpeoB=new pelpeoB('我是白的','我是弟弟',16);
console.log(newpelpeoB)
//问题;原型继承会将公有属性也继承在原型下
4:寄生组合继承
// 寄生组合继承
function pelpeoA(name,age){
//公有属性
this.name=name;
this.age=age;
}
//共有属性
pelpeoA.prototype.eat=function(){
console.log('我喜欢吃雪梨')
}
var newpelpeoA=new pelpeoA('我是哥哥','今年18'); //实例化
//B要去继承A所有的属性和方法 ,共有去继承A的属性
function pelpeoB(color,name,age){
this.color=color;
pelpeoA.call(this,name,age) //共有属性共有继承
}
//可以传参
var fn=function(){}; //通过类似于中间商来实现继承
fn.prototype=pelpeoA.prototype;
pelpeoB.prototype=new fn();//寄生组合继承
//如果直接这样,pelpeoB和pelpeoA公有一个原型对象
// pelpeoB.prototype=new pelpeoA.prototype;
var newpelpeoB=new pelpeoB('我是白的','我是弟弟',16);
console.log(newpelpeoB)
5:class继承
ES6,通过extends来继承 ,
class pelpeoA{
constructor(name,age) {
this.name=name;
this.age=age
}
eat(){
console.log('我喜欢吃雪梨')
}
}
class pelpeoB extends pelpeoA{
constructor(name,age,color){
super(name,age);
this.color=color;
}
alert(){
console.log('我可以发警告')
}
}
var obj=new pelpeoB('我是弟弟',18,'color');
console.log(obj)