ES6 extends继承及super使用读书笔记

extends 继承

extends 实现子类的继承
super() 表示父类的构造函数, 子类必须在 constructor中调用父类的方法,负责会报错。
子类的 this 是父类构造出来的, 再在子类的构造函数中进行丰富

class Prosen {

}
class Child extends Prosen {
  constructor() {}
}
// const child = new Child()
// console.log(child)  ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor

此时子类Child没有this，因为没有在构造函数中调用super()函数

ES5继承和ES6继承的区别

ES5 继承, 先创造子类的 this, 再将父类的方法和属性添加到子类的 this上

ES6 继承先将父类的属性和方法添加到 this上, 子类再通过 super()来获取 this之后改造。
子类实例的创建基于父类实例,只有super方法才能得到父类实例

class Zoo {
      constructor(x, y) {
        this.x = x;
        this.y = y;
      }
    }
    class Dog extends Zoo {
      constructor(x,y,z) {
        super(x,y)
        this.z = z;
      }
    }
    const dog = new Dog(1,2,3)
    console.log(dog)
    console.log(dog instanceof Dog)  // true
    console.log(dog instanceof Zoo)  // true

super 关键字用法

可以当函数使用
也可以当对象使用

super 作为函数使用

super 作为函数使用时, 代表父类的构造函数。子类实现继承,必须要执行一次 super()。
super 代表父类的构造函数, 但却返回子类的实例。调用 super()相当于:
A.prototype.constructor.call(this) super(this) 内部的this指向的是子类。
super()函数只能在子类的 constructor函数中使用。

super作为对象使用

super 作为对象使用时, 在普通的方法中指向的是父类的原型对象, 在静态方法指向的是父类。
super作为父类的原型对象, 那么定义在父类实例对象上的属性和方法是无法调用的。
子类通过super对象调用父类原型上的普通方法时, 方法内部的 this指向当前子类实例。

class A {
    constructor(){
        this.x = 1
    }
}
class B extends A {
    constructor(){
        super()
    },
    m(){
         console.log(super.x)   // undefind
    }
}

super作为对象在子类的静态方法中使用

子类作为对象在普通方法中指向的是父类的构造函数。 super调用的父类构造函数方法中的this指向子类实例。
子类作为对象在静态方法中指向的是父类。super调用的父类的方法中的this指向的是子类，而不是子类的实例。

super图解

子类的proto和prototype.proto

class作为构造函数的语法糖, 它同时具有 __proto__和prototype属性。
假设: 父类为A, 子类为B
那么子类(B)的__proto__属性指向父类(A),这表示构造函数的继承
子类的原型对象(prototype)上也有__proto__属性,指向父类(A)的原型对象(prototype),它表示方法的继承。

图解

实例的proto

一句话, 实例的__proto__指向子类的原型，实例的__proto__的__proto__就是父类的原型对象。也就是父类实例的__proto__属性。

图解实例proto

待更新