javascript继承的几种方式

xiaoxiao2021-02-28  32

javascript继承的几种方式

PS:javascript只支持继承不支持接口实现

1:原型链继承:

function Box(){ this.name='苏'; } function Desk(){ this.age=22; } Desk.prototype=new Box(); //通过原型链继承Box对象里的属性和方法 var desk=new Desk(); alert(desk.name); //苏

原型链继承流程图:

缺点:引用共享;无法传参

2:对象冒充:

 先构造函数实现传参,再对象冒充。

function Box(age){ this.age=age; this.run=function(){ return this.age; } } function Desk(age){ Box.call(this,age) //对象冒充 ,this是将作用域传递过来 } var desk=new Desk(22); alert(desk.age); //22

缺点:构造函数里的方法每次,每次创建对象时都会实例化,浪费内存。最好放在原型里,但对象冒充无法集成原型里的方法。

3:组合继承:常用继承但会调用超类型两次

function Box(age){ this.age=age; } Box.prototype.run=function(){ return this.age; } function Desk(age){ //对象冒充 调用一次 Box.call(this,age) } Desk.prototype=new Box() //原型链继承方法 调用一次

4:原型式继承:

function obj(o){ //传递一个字面量对象 function F(){} F.prototype=o; return new F(); } var box={ name:'苏', run:[1,2,3,4] } var box1=obj(box); alert(box1.name); //继承了 box1.run.push('5'); var box2=obj(box); alert(box2.run) //1,2,3,4,5 引用类型共享了

5:寄生式继承:

function create(o){ // 寄生函数 var f=obj(o); return f; }; function obj(o){ function F(){} F.prototype=o; return new F(); } var box={ name:'苏', run:[1,2,3,4] } var box1=create(box); var box2=create(box); box1.run.push(5); alert(box1.run==box2.run) //true 引用类型共享了

6:寄生组合继承:

function obj(o){ //传递一个字面量对象 function F(){} F.prototype=o; return new F(); } function Box(){ this.name=name; } Box.prototype.run=function(){ return this.name; } function Desk(name){ Box.call(this,name); } function create(box,desk){ //用一个函数完成继承 var f=obj(box.prototype); f.constructor=desk; desk.prototype=f; } create(Box,Desk); 解决组合式继承两次调用的问题。

转载请注明原文地址: https://www.6miu.com/read-2623045.html

最新回复(0)