ES6的类与继承

ES6的类与继承

几个关键字
1、es5没有类，只有构造函数。ES6新增了class，用于创建类。
2、constructor 方法是默认添加的方法，在new一个对象时，自动调用该方法，constructor里面定义自己的属性。
3、子类通过extends关键字，继承了父类的所有属性和方法。父类中的所有方法默认是添加到子类的原型上，所以extends继承的实质仍然是原型链。super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。
第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}

class B extends A {
  constructor() {
    super();
  }
}

上面代码中，子类B的构造函数之中的super()，代表调用父类的构造函数。这是必须的，否则 JavaScript 引擎会报错。
注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。
第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
例1：普通方法

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

super只能访问父类中的方法，如果要访问父类初始化的属性则失败；

class A {
  constructor() {
    this.p = 2;
}
}

class B extends A {
  get m() {
    return super.p;
  }
}

let b = new B();
b.m // undefined

p是A的实例属性，则super访问不到。
一个有意思的情景：

class A {
  constructor() {
    this.x = 1;
  }
}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

在赋值的时候super是子类的this,而读取的时候则变为父类的原型