JavaScript关于继承的几种实现方式

1、原型链继承
function Box(){                                     //被继承的函数叫做超类型（父类、基类）
this.name='Lee';
}

function Desk(){                                   //继承函数叫做子类型（子类、派生类）
this.age=100
}

function Table(){
this.level=1;
}

//通过原型链继承，超类实例化后的对象实例，赋值给子类型的原型属性
//new Box()会将Box构造里面的信息和原型里的信息都交给Desk
Desk.prototype=new Box();
Table.prototype=new Desk(); //通过原型链继承

var desk =new Desk();
alert(desk.age);
alert(desk.name);

var table=new Table();
alert(table.level);
alert(table.age);
alert(table.name);

-----------------------------------------------------------------------

function Box(){ //被继承的函数叫做超类型（父类、基类）
this.name='Lee';
}
Box.prototype.name='joooooooooh';

function Desk(){ //继承函数叫做子类型（子类、派生类）
this.age=100
}

Desk.prototype=new Box();　　　　 //通过原型链继承

var desk=new Desk();
alert(desk.name); 　　　　　　 //就近原则，实例有就返回，没有再去原型中查找 //Lee

var box=new Box();

//子类型从属于超类型和自己
alert(desk instanceof Desk); //true
alert(desk instanceof Box); //true
alert(box instanceof Desk); //false
----------------------------------------------------------------------------------------------

//2、使用对象冒充继承 借用构造函数继承（对象冒充继承）
function Box(name ,age){
this.age=age;
this.name=name;
this.family=['爷爷','奶奶','妈妈']; 　　　//引用类型放在构造里就不会被共享
}
Box.prototype.family='家庭';

function Desk(name,age){
Box.call(this,name,age) 　　　　　　 //对象冒充,只能继承构造里面的信息
}
//测试引用类型在构造函数不会被共享
var desk1=new Desk('lrr',100);
alert(desk1.name);
desk1.family.push('弟弟');
alert(desk1.family);　　　　　　　　 //爷爷,奶奶,妈妈，弟弟

var desk2=new Desk('lrr',100);
alert(desk2.name);
alert(desk2.family);　　　　　　　　 //爷爷,奶奶,妈妈
-------------------------------------------------------------------------------------------------

 

//3、采用对象冒充加原型链的方法实现（弥补对象冒充无法使用原型方法） 组合继承（结合前两种）

function Box(name ,age){
this.age=age;
this.name=name;
this.family=['爷爷','奶奶','妈妈']; 　　　　　　 //引用类型放在构造里就不会被共享
}

//方法放在原型中
Box.prototype.run=function(){
return this.name+this.age+'运行中';
}

function Desk(name,age){
Box.call(this,name,age) 　　　　　　　　 //对象冒充,只能继承构造里面的信息
}

Desk.prototype=new Box(); 　　　　　　　　　　 //原型链
var desk=new Desk('lrr',100);

alert(desk.name);
alert(desk.run());
--------------------------------------------------------------------------------------------------------------------

//前面已经使用的 1 原型链继承 2 借用构造函数继承（对象冒充继承） 3 组合继承（结合前两种）

//4、原型式继承
//临时中转函数-----该方法核心
function obj(o){                             //o表示将要传递进入的对象
function F(){} 　　　　　　　　 //F构造是一个 临时新建对象，用来存储传递过来的对象
F.prototype=o; 　　　　　　　　 //将o对象实例赋值给F构造的原型对象 //F.prototype=o; 其实就相当于 Desk.prototype=new Box()
return new F(); 　　　　　　　　 //最后返回这个得到的传递过来对象的对象实例
}

//这是字面量的声明方式，相当于var box=new Box();
var box={
name:'Lee',
age:100,
family:['爷爷','奶奶','妈妈']
};
alert(box.name); 　　　　　　 //Lee
//box1就等于new F()
var box1=obj(box);
alert(box1.name); 　　　　　　 //Lee
alert(box1.family); 　　　　　　 //爷爷,奶奶,妈妈
box1.family.push('弟弟');
alert(box1.family); 　　　　　　 //爷爷,奶奶,妈妈,弟弟

var box2=obj(box);
alert(box2.family); 　　　　　　 //爷爷,奶奶,妈妈,弟弟 //引用后其实也继承了原型方法
-----------------------------------------------------------------------------------



// 5、寄生式继承=原型式+工厂模式

//临时中转函数-----该方法核心
function obj(o){
function F(){}
F.prototype=o;
return new F();
}
//寄生函数
function create(o){
var f = obj(o);

//开始可以进行扩展
f.run=function(){
return this.name+this.age+this.family+"------运行";
}

return f;
}

var box={
name:'LN10',
age:100,
family:['爷爷','奶奶','妈妈']
}

var box1=create(box);
alert(box1.name);
alert(box1.run());
-----------------------------------------------------------------------------------------------



//6 寄生组合继承

//临时中转函数-----该方法核心
function obj(o){
function F(){}
F.prototype=o;
return new F();
}

//寄生函数
function create(box,desk){
var f=obj(box.prototype); 　　　　 //注意这里1
f.constructor=desk; 　　　　　　 //调整原型构造指针
desk.prototype=f;
}

function Box(name,age){
this.name=name;
this.age=age;
}

Box.prototype.run=function(){
return this.name+this.age+"------运行-----------";
}

function Desk(name,age){
Box.call(this,name,age); 　　　　　　 //对象冒充
}

//通过寄生组合继承来实现继承
create(Box,Desk); //这句话用来替代Desk.prototype=new Box();

var desk=new Desk('lee',100);
alert(desk.run());
//alert(desk.constructor); 　　　　 //此时调整原型指针后才指向desk
--------------------------------------------------------------------------------------------------