JS的几种继承,从ES5到ES6。

什么是继承呢?继承是指子类继承父类的属性和方法,便于代码的复用

原型继承

function Parent() {

}

function Child() {

}

child.prototype = new Parent()

//使子类的原型等于父类的实例,此时child.prototype.constructor 为Parent函数对象

child.prototype.constructor = child //此时child.prototype.constructor 为child函数对象

原型继承的特点:

与其他后台语言不同,其他后台语言一般是拷贝继承,把父类的属性和方法拷贝一份到子类中供子类使用,而JS是把父类的原型放到子类实例的原型链上,是基于__prototype__原型链查找机制完成

子类可以重写父类的方法并且会导致父类的其他实例也受影响

父类的私有或公有属性和方法,最后都会变成子类中公有的属性和方法

不能传参,不能实现多继承

call继承

function Parent(name,age) {

}

function Child(name, age) {

  Parent.call(this, name, age) //在子类中调用父类的方法,并改变父类的this指向

}

可以将父类私有的变成子类私有的,但是不能访问父类原型上的属性和方法

可以传参可以实现多继承

不能实现函数的复用,每个子类实例都会重新调用父类实例函数

组合继承

  function Parent(name,age) {

  }

  function Child(name, age) {

   Parent.call(this, name, age) //在子类中调用父类的方法,并改变父类的this指向

  }

  Child.prototype = new parent()

父类私有的属性和方法变成子类私有的属性和方法,父类公有的属性和方法变成子类共同的属性和方法

函数可复用可传参

调用了两次父类构造函数,生成了两份实例

组合继承优化

function Parent(name,age) {

}

function Child(name, age) {

  Parent.call(this, name, age) *//在子类中调用父类的方法,并改变父类的this指向*

}

//var B = Object,create(A),以A为对象创建B对象,B对象继承A的所有属性和方法*

Child.prototype = Object.create(Parent)

Child.prototype.constructor = Child

这个继承解决了上面继承的所有缺点,是ES5最完美的继承方式,比较推荐

ES6继承

class Parent {

  constructor(name, age) {

   this.name = name

   this.age = age

  }

}

class Child extends Parent {

  constructor(name,age) {

   super(name, age) //通过super调用父类方法

  }

}

用类来定义构造函数,在constructor()里面定义构造函数的私有属性

通过extends实现类的继承,在子类的constructor()的第一行写下super(),来实现子类的私有属性继承父类的私有属性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 继承6种套餐 参照红皮书,JS继承一共6种 1.原型链继承 核心思想:子类的原型指向父类的一个实例 Son.pro...
    灯不梨喵阅读 3,169评论 1 2
  • 继承 Javascript中继承都基于两种方式:1.通过原型链继承,通过修改子类原型的指向,使得子类实例通过原型链...
    LeoCong阅读 338评论 0 0
  • 继承是面向对象中一个比较核心的概念。其他正统面向对象语言都会用两种方式实现继承:一个是接口实现,一个是继承。而EC...
    lovelydong阅读 387评论 0 2
  • vw、vh、rem、em、px的区别 pxpx是绝对单位,1px就是一个像素点 emem是相对单位,是相对于父级的...
    郝晨光阅读 1,267评论 0 12
  • 这一周同样比较忙碌,但也比较颓废,连续3天出差,所以运动和手帐都没有好好做。 一、目标回顾 本周制定目标5个,实际...
    幽幽86129阅读 430评论 0 0