【JavaScript】三种方式实现JavaScript继承

一时失言乱红尘 2022-03-10 08:46 370阅读 0赞

##### 1，组合继承 #####

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() 来继承父类的函数。  
![在这里插入图片描述][20190310142439734.png]

这种继承方式优点在于构造函数可以传参，不会与父类引用属性共享，可以复用父类的函数，但是也有缺点  
不足1：:在继承父类函数的时候调用了父类构造函数，导致子类的原型上多了不需要的父类属性，存在内存上的浪费，可以看到Child里面有两个val属性  
不足2：改变了Child的构造函数，Child的构造函数变成了Parent  
![在这里插入图片描述][20190313121247797.png]

##### 2，寄生组合继承 #####

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)
        Child.prototype.constructor = Child
    
        const child = new Child(1)
    
        child.getValue() // 1
        child instanceof Parent // true

以上继承实现的核心就是将父类的原型赋值给了子类，并且将构造函数设置为子类，这样既解决了无用的父类属性问题，还能正确的找到子类的构造函数。

##### 3，使用ES6 class #####

class Parent {
          constructor(value) {
            this.val = value
          }
          getValue() {
            console.log(this.val)
          }
        }
        class Child extends Parent {
          constructor(value) {
            super(value) //执行Parent的constructor
            this.val = value
          }
        }
        let child = new Child(1)
        child.getValue() // 1
        child instanceof Parent // true

[20190310142439734.png]: /images/20220310/c937fa76db254ba5a60de65cb79a5d13.png
[20190313121247797.png]: /images/20220310/9b59c18528f64e16bf24e9c9f42a0186.png