JS实现继承

原型链继承

原型链继承的原理很简单，直接让子类的原型对象指向父类实例，当子类实例找不到对应的属性和方法时，就会往它的原型对象，也就是父类实例上找，从而实现对父类的属性和方法的继承

    // 父类
    function Parent() {
      this.name = 'Demi'
    }
    // 父类的原型方法
    Parent.prototype.getName = function () {
      return this.name
    }
    // 子类
    function Child() {}
 
    // 让子类的原型对象指向父类实例, 这样一来在Child实例中找不到的属性和方法就会到原型对象(父类实例)上寻找
    Child.prototype = new Parent()
    Child.prototype.constructor = Child // 根据原型链的规则,顺便绑定一下constructor, 这一步不影响继承, 只是在用到constructor时会需要
 
    // 然后Child实例就能访问到父类及其原型上的name属性和getName()方法
    const child = new Child()
    child.name // 'Demi'
    child.getName() // 'Demi'

缺点：

1.由于所有Child实例原型都指向同一个Parent实例, 因此对某个Child实例的父类引用类型变量修改会影响所有的Child实例

2.在创建子类实例时无法向父类构造传参, 即没有实现super()的功能

    // 示例
    function Parent() {
      this.name = ['Demi']
    }
    Parent.prototype.getName = function () {
      return this.name
    }
 
    function Child() {}
 
    Child.prototype = new Parent()
    Child.prototype.constructor = Child
 
    // 测试
    const child1 = new Child()
    const child2 = new Child()
    child1.name[0] = 'foo'
    console.log(child1.name) // ['foo']
    console.log(child2.name) // ['foo'] (预期是['Demi'], 对child1.name的修改引起了所有child实例的变化)

构造函数继承

构造函数继承，即在子类的构造函数中执行父类的构造函数，并为其绑定子类的this，让父类的构造函数把成员属性和方法都挂到子类的this上去，这样既能避免实例之间共享一个原型实例，又能向父类构造方法传参

    function Parent(name) {
      this.name = [name]
    }
    Parent.prototype.getName = function () {
      return this.name
    }
 
    function Child() {
      Parent.call(this, 'Demi') // 执行父类构造方法并绑定子类的this, 使得父类中的属性能够赋到子类的this上
    }
 
    //测试
    const child1 = new Child()
    const child2 = new Child()
    child1.name[0] = 'foo'
    console.log(child1.name) // ['foo']
    console.log(child2.name) // ['Demi']
    child2.getName() // 报错,找不到getName(), 构造函数继承的方式继承不到父类原型上的属性和方法

缺点：找不到父类原型上的属性和方法

组合式继承

既然原型链继承和构造函数继承各有互补的优缺点, 那么我们为什么不组合起来使用呢, 所以就有了综合二者的组合式继承

    function Parent(name) {
      this.name = [name]
    }
    Parent.prototype.getName = function () {
      return this.name
    }
 
    function Child() {
      // 构造函数继承
      Parent.call(this, 'Demi')
    }
    //原型链继承
    Child.prototype = new Parent()
    Child.prototype.constructor = Child
 
    //测试
    const child1 = new Child()
    const child2 = new Child()
    child1.name[0] = 'foo'
    console.log(child1.name) // ['foo']
    console.log(child2.name) // ['Demi']
    child2.getName() // ['Demi']

缺点：找每次创建子类实例都执行了两次构造函数(Parent.call()和new Parent())，虽然这并不影响对父类的继承，但子类创建实例时，原型中会存在两份相同的属性和方法，这并不优雅

寄生式继承

    function Parent(name) {
      this.name = [name]
    }
    Parent.prototype.getName = function () {
      return this.name
    }
 
    function Child() {
      // 构造函数继承
      Parent.call(this, 'Demi')
    }
    //原型链继承
    // Child.prototype = new Parent()
    Child.prototype = Parent.prototype //将`指向父类实例`改为`指向父类原型`
    Child.prototype.constructor = Child
 
    //测试
    const child1 = new Child()
    const child2 = new Child()
    child1.name[0] = 'foo'
    console.log(child1.name) // ['foo']
    console.log(child2.name) // ['Demi']
    child2.getName() // ['Demi']

ES6继承

    class Parent {
      constructor(name) {
        this.name = name;
      }
      getName() {}
    }
 
    class Child extends Parent {
      constructor(name, age) {
        super(name);
        this.age = age;
      }
      getAge() {}
    }
    let person = new Child('Demi', 24)
    console.log(person) // {name: 'Demi', age: 24}

原型和原型链

在 js 中我们是使用构造函数来新建一个对象的，每一个构造函数的内部都有一个 prototype 属性值，这个属性值是一个对象，这个对象包含了可以由该构造函数所有实例共享的属性和方法。当我们使用构造函数新建一个实例后，在这个实例的内部将包含一个指针指向构造函数的 prototype 属性对应的值，在 ES5 中这个指针被称为对象的原型。
当我们访问一个对象的属性时，如果这个对象内部不存在这个属性，那么它就会去它的原型对象里找这个属性，这个原型对象又会有自己的原型，于是就这样一直找下去，也就是原型链的概念。原型链的终点是null

获取原型的方法

p.__proto__

p.constructor.prototype

Object.getPrototypeOf(p)