<script type="text/javascript">
//父级函数Box
function Box(name,age,home){
//实例属性
this.name=name;
this.age=age;
this.home=home;
//实例方法
this.say = function(){
return this.home+" "+"继承调用Box中的实例方法";
}
}
//Box的原型对象方法
Box.prototype.run = function(){
console.log(this.name + "回家了");
//return this.name + "回家了";
}
//实例对象
var b = new Box("tom",17,"北京");
console.log(b);//box {name: "tom", age: 17, home: "北京"}
console.log(b.say());//继承调用Box中的实例方法
b.run();//tom回家了
//console.log(b.run());//tom回家了
//-----------------继承方式一:通过改变父类的执行环境-------------------------------------------------------------
//子集函数
function Pox(name,age,home){
this.parent = Box;//将父级Box的代码赋予子集中的一个属性this.parent,相当于Pox有了Box里的属性和方法
this.parent("tom",17,"北京");//将实参传递到Box里面,然后执行其功能
delete this.parent;//在Pox函数中,删除this.parent,保留Box的代码
}
var p = new Pox();
//p.run();//p.run is not a function 不能继承父级原型对象下的方法,
console.log(p);//Pox {name: "tom", age: 17, home: "北京"}
console.log(p.name);//tom
console.log(p.home);//北京
console.log(p.say());//继承调用Box中的实例方法
//-----------------继承方式二,通过call继承---缺点:不能继承调用父类原型对象方法--------------------------------------------------------------------------
//子集函数
function Cox(name,age,home,adress){
Box.call(this,name,age,home,adress);//this是为了改变父级中实例属性的指向,让其指向子集
this.adress = adress;
}
var c = new Cox("tom",17,"北京","十八路二巷");
console.log(c);//Cox {name: "tom", age: 17, home: "北京", adress: "十八路二巷"}
console.log(c.age);//17
console.log(c.say());//继承调用Box中的实例方法
//c.run();//c.run is not a function 不能继承调用父类原型对象的方法
//-----------------继承方式三,通过apply继承---缺点:不能继承调用父类原型对象方法--------------------
//子集函数
function Fox(name,age,home,email){
this.email = email;
//this是为了改变父级中实例属性的指向,让其指向子集
Box.apply(this,[name,age,home,email]);//apply传递参数以数组的形式传递
}
var f = new Fox("tom",17,"北京","123@.com");
console.log(f);//Fox {email: "123@.com", name: "tom", age: 17, home: "北京"}
console.log(f.name)//tom
console.log(f.say());//继承调用Box中的实例方法
//f.run();//f.run is not a function 不能继承调用父类原型对象方法
//-----------------继承方式四--原型链继承---------------------------------------------------------------------------- -
//原理:让子类的原型对象指向父类的实例化对象
function Tox(name,age,home){};
Tox.prototype = new Box();//让子类的原型对象指向父类的实例化对象
var t = new Tox("tom",17,"北京");//子类传参无法改变父类的属性值
console.log(t);//Tox {}
console.log(t.home);//undefined
console.log(t.age);//undefind
console.log(t.say());//继承调用Box中的实例方法
//原型链继承 缺点:
//1.对象父类中通过传参的实例属性,在利用原型链方式继承时,子类无法通过传参的方式改变父类的属性值。
//2.如果在父类中有引用类型的属性,会被共享,一个改动,全部改动。
//-----------------.继承方式五--混合(组合)继承(解决以上缺点问题)----------------------------------------
//call或apply继承方法+原型链继承方法综合
function Mox(name,age,home){//call或apply继承方法
Box.call(this,name,age,home);
}
Mox.prototype = new Box();//原型链继承
var m = new Mox("tom",17,"北京");
console.log(m);//Mox {name: "tom", age: 17, home: "北京", say: ƒ}
console.log(m.home);//北京
console.log(m.say());//继承调用Box中的实例方法
m.run();//tom回家了 可以继承调用父类原型对象方法
//问题:
//父类执行了两次
//子类原型下多了一些多余的属性和方法(原父类的实例属性和方法)
//-----------------寄生组合继承(解决混合继承的问题)---------------------------------------------------------------
//原理
function Nox(name,age,home){
Box.apply(this,[name,age,home]);//this改变指向,使父类中的实例属性和方法指向子类
}
//封装一个函数
//supType表示父类
//subType表示子类
function fn(supType,subType){
var proto = Object.create(supType.prototype);
//proto下有一个constructor,这个constructor原来指向父类supType
proto.constructor = subType;//将constructor的指向修改为supType
subType.prototype = proto;//将修改后的对象全部赋值给子类
}
//调用函数
fn(Box,Nox);
var n = new Nox("tom",17,"北京");
console.log(n);//Nox {name: "tom", age: 17, home: "北京", say: ƒ}
console.log(n.age);//17
//-------------------ES6继承--关键字:extends和super---------------------------------------------------------------
class Father{
constructor(name,age,adress){//实例属性写在constructor里面
this.name = name;
this.age = age;
this.adress = adress;
}
eat(){
return this.adress + "在中国";
}
}
//Son继承Father
class Son extends Father{
constructor(name,age,adress,phone){//实例属性写在constructor里面
super(name,age,adress);//继承Father中constructor的属性,继承的属性写在super的括号内
//super(name,age);
this.phone = phone;
}
fn(){
return this.phone + "是我的电话号码";
}
}
var sun = new Son("张三",50,"深圳","15727656869");
console.log(sun);
console.log(sun.name);//张三
console.log(sun.fn());//15727656869是我的电话号码
console.log(sun.eat());//深圳在中国
</script>