07前端面试题-继承方式

115 阅读2分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第5天,点击查看活动详情

一、类的声明

  • 使用构造函数声明类

image.png

  • ES6中类的声明

image.png

  • 类的实例化

image.png

二、类的继承方式

(一)借助构造函数实现继承

  • 这种方式把父级构造在子类中执行,同时修改了父级构造函数的this指向,从而将父类的属性挂载到了子类实例上
  • 缺点:子类并没有继承父类的原型链,所以没有实现真正的继承

image.png

image.png

(二)借助原型链实现继承

  • 这种方式通过将子类原型指向父类的实例对象,将父类的原型链挂载到子类上,从而实现继承
  • 缺点:因为所有的子类的原型都指向同一个父类的实例对象(原型共用),所以当改变一个子类继承的父类的引用类型属性时,所有子类对应的属性都会发生改变 image.png

image.png

(三)组合方式(组合前俩种方式)

  • 这种方法解决了前两种方式的缺点
  • 缺点:父类构造函数执行了两次 image.png

(四)组合继承方式的优化一

  • 上一种方式执行了两次父类构造函数,相当于将父类属性在子类挂载了两次,使用这种优化方式,直接将子类的原型指向父类的原型,就解决了这个问题(只在子类构造函数种执行一次父类狗仔函数)
  • 缺点:不能用instanceof判读实例是由子类还是父类直接实例化的

image.png

(五)组合继承方式的优化二(完美写法)

  • 这种方式可以用instanceof判读实例是由子类还是父类直接实例化的 image.png

image.png