javascript中的继承详解:

tech2022-08-19  75

1 原型链继承

父类的实例作为子类的原型

function Woman(){ } Woman.prototype= new People(); Woman.prototype.name = 'haixia'; let womanObj = new Woman();

优点:简单易于实现,父类的新增的实例与属性子类都能访问

缺点:可以在子类中增加实例属性,如果要新增加原型属性和方法需要在new 父类构造函数的后面

无法实现多继承

创建子类实例时,不能向父类构造函数中传参数

2.借用构造函数继承(伪造对象、经典继承)

复制父类的实例属性给子类

function Woman(name){ //继承了People People.call(this); //People.call(this,'wangxiaoxia'); this.name = name || 'renbo' } let womanObj = new Woman();

优点:解决了子类构造函数向父类构造函数中传递参数

可以实现多继承(call或者apply多个父类)

缺点:方法都在构造函数中定义,无法复用

不能继承原型属性/方法,只能继承父类的实例属性和方法

3.实例继承(原型式继承)

function Wonman(name){ let instance = new People(); instance.name = name || 'wangxiaoxia'; return instance; } let wonmanObj = new Wonman();

优点:不限制调用方式,简单,易实现

缺点:不能多次继承

4.组合式继承

调用父类构造函数,继承父类的属性,通过将父类实例作为子类原型,实现函数复用

function People(name,age){ this.name = name || 'wangxiao' this.age = age || 27 } People.prototype.eat = function(){ return this.name + this.age + 'eat sleep' } function Woman(name,age){ People.call(this,name,age) } Woman.prototype = new People(); Woman.prototype.constructor = Woman; let wonmanObj = new Woman(ren,27); wonmanObj.eat();

缺点:由于调用了两次父类,所以产生了两份实例

优点:函数可以复用,不存在引用属性问题

可以继承属性和方法,并且可以继承原型的属性和方法

5.寄生式继承

​ 寄生式继承是与原型式继承紧密相关的一种思路。寄生式继承的思路 与寄生构造函数和工厂模式类似,即创建一个仅用于封装继承过程的函数, 该函数在内部已某种方式来增强对象,最后再像真地是它做了所有工作一 样返回对象。

function createAnother(original) { var clone = object(original); clone.sayHi = function () { alert("hi"); }; return clone; } var person = { name:"EvanChen", friends:["Shelby","Court","Van"]; }; var anotherPerson = createAnother(person); anotherPerson.sayHi();///"hi"

​ 基于 person 返回了一个新对象 -—— person2,新对象不仅具有person 的所有属性和方法,而且还有自己的 sayHi() 方法。在考虑对象而不是自定义类型和构造函数的情况下,寄生式继承也是一种有用的模式。

6 寄生组合继承

通过寄生的方式来修复组合式继承的不足,完美的实现继承

//父类 function People(name,age){ this.name = name || 'wangxiao' this.age = age || 27 } //父类方法 People.prototype.eat = function(){ return this.name + this.age + 'eat sleep' } //子类 function Woman(name,age){ //继承父类属性 People.call(this,name,age) } //继承父类方法 (function(){ // 创建空类 let Super = function(){}; Super.prototype = People.prototype; //父类的实例作为子类的原型 Woman.prototype = new Super(); })(); //修复构造函数指向问题 Woman.prototype.constructor = Woman; let womanObj = new Woman();

7 es6实现继承

//class 相当于es5中构造函数 //class中定义方法时,前后不能加function,全部定义在class的protopyte属性中 //class中定义的所有方法是不可枚举的 //class中只能定义方法,不能定义对象,变量等 //class和方法内默认都是严格模式 //es5中constructor为隐式属性 class People{ constructor(name='wang',age='27'){ this.name = name; this.age = age; } eat(){ console.log(`${this.name} ${this.age} eat food`) } } //继承父类 class Woman extends People{ constructor(name = 'ren',age = '27'){ //继承父类属性 super(name, age); } eat(){ //继承父类方法 super.eat() } } let wonmanObj=new Woman('xiaoxiami'); wonmanObj.eat();
最新回复(0)