原型继承和 Class 继承

涉及面试题:

  • 原型如何实现继承?
  • Class 如何实现继承?
  • Class 本质是什么?

⾸先先来讲下 class ,其实在 JS 中并不存在类, class 只是语法糖,本质还是函数。

  class Person {}
  Person instanceof Function // true

组合继承 --- 组合继承是最常⽤的继承⽅式。

  function Parent(value) {
     this.val = value
  }
  Parent.prototype.getValue = function() {
     console.log(this.val)
  }
  function Child(value) {
     Parent.call(this, value)
  }
  Child.prototype = new Parent()
  const child = new Child(1)
  child.getValue() // 1
  child instanceof Parent // true
  • 以上继承的⽅式核⼼是在⼦类的构造函数中通过 Parent.call(this) 继承⽗类的属性, 然后改变⼦类的原型为 new Parent() 来继承⽗类的函数。
  • 这种继承⽅式优点在于构造函数可以传参,不会与⽗类引⽤属性共享,可以复⽤⽗类的函数,
  • 但是也存在⼀个缺点就是在继承⽗类函数的时候调⽤了⽗类构造函数,导致⼦类的原型上多了不需要的⽗类属性,存在内存上的浪费。

寄⽣组合继承 --- 这种继承⽅式对组合继承进⾏了优化,组合继承缺点在于继承⽗类函数时调用了构造函数,我们只需要优化掉这点就⾏了。

      function Parent(value) {
         this.val = value
      }
      Parent.prototype.getValue = function() {
         console.log(this.val)
      }
      function Child(value) {
         Parent.call(this, value) 
      }
      Child.prototype = Object.create(Parent.prototype, {
         constructor: {
           value: Child,
           enumerable: false,
           writable: true,
           configurable: true
         }
      })
      const child = new Child(1)
      child.getValue() // 1
      child instanceof Parent // true
  • 以上继承实现的核心就是将⽗类的原型赋值给了子类,并且将构造函数设置为子类,这样既解决了无用的⽗类属性问题,还能正确的找到子类的构造函数。

Class 继承 --- 以上两种继承方式都是通过原型去解决的,在 ES6 中,我们可以使⽤ class 去实现继承,并且实现起来很简单。

            class Parent {
               constructor(value) {
                 this.val = value
               }
               getValue() {
                 console.log(this.val)
               }
            }

            class Child extends Parent {
                 constructor(value) {
                   super(value)
                   this.val = value
                 }
            }
            let child = new Child(1)
            child.getValue() // 1
            child instanceof Parent // true
  • class 实现继承的核心在于使用 extends 表明继承⾃哪个⽗类,并且在子类构造函数中必须调⽤ super ,
    因为这段代码可以看成 Parent.call(this, value) 。
posted @ 2021-12-30 16:18  ·灯  阅读(78)  评论(0编辑  收藏  举报