首先对于ES6的class,其实在JS中并不存在类,class只是语法糖,本质上仍然是函数。

  1. class Person {}
  2. Person instanceof Function // true

1. 基于原型的继承

组合继承是最常用的继承方式。核心是在子类的构造函数中通过parent.call(this)来继承父类的属性,然后改变子类的原型为new Parent()来继承父类的函数。 这种继承方式优点在于构造函数可以传参,不会与父类引用属性共享,可以复用父类的函数,但是也存在一个缺点就是在继承父类函数的时候调用了父类构造函数,导致子类的原型上多了不需要的父类属性,存在内存上的浪费。

  1. function Parent(value){
  2. this.val = value
  3. }
  4. Parent.prototype.getValue = function(){
  5. console.log(this.val)
  6. }
  7. function Child(value){
  8. Parent.call(this,value)
  9. }
  10. Child.prototype = new Parent()
  11. const child = new Child(1)
  12. child.getValue() //1
  13. child instanceof Parent //true

寄生组合继承对组合继承做了优化,将父类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的父类属性问题,还能正确的找到子类的构造函数。

  1. function Parent(value) {
  2. this.val = value
  3. }
  4. Parent.prototype.getValue = function() {
  5. console.log(this.val)
  6. }
  7. function Child(value) {
  8. Parent.call(this, value)
  9. }
  10. Child.prototype = Object.create(Parent.prototype, {
  11. constructor: {
  12. value: Child,
  13. enumerable: false,
  14. writable: true,
  15. configurable: true
  16. }
  17. })
  18. const child = new Child(1)
  19. child.getValue() // 1
  20. child instanceof Parent // true

2. 基于 class 的继承

class实现继承的核心就是在于使用extends表明继承自哪个父类,并且在子类的构造函数中必须调用super,因为这段代码等同于 parent.call(this,value)。 当然,这也说明在JS中并不存在类,class的本质就是函数。

  1. class Parent {
  2. constructor(value){
  3. this.val = value
  4. }
  5. getValue(){
  6. console.log(this.val)
  7. }
  8. }
  9. class Child extends Parent {
  10. constructor(value){
  11. super(value)
  12. }
  13. }
  14. let child = new Child(1)
  15. child.getValue() // 1
  16. child instanceOf Parent // true