说明
- 适用于 es6 初学者
- 理解 class 的使用
extends 继承
- class 可以通过 extends 关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
class Point{
}
class ColorPoint extends Point{
}
复制代码上面代码定义了一个ColorPoint类，该类通过extends关键字，继承了Point类的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Point类。下面，我们在ColorPoint内部加上代码。
super 调用父类 constructor
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()
}
}
复制代码super来调用父类的 constructor
子类没有定义 constructor，会默认添加
class ColorPoint extends Point {
}
// 等同于
class ColorPoint extends Point {
constructor(...args) {
super(...args);
}
}
复制代码合理的使用 super
super 当做函数调用
- 第一种情况，
super关键字作为函数调用。es6 中，子类的构造函数必须执行一次 super（记住我们可以不写 constructor 和 super ，函数会自动添加上，看👆的 case）
class A {}
class B extends A {
constructor() {
super();
}
}
复制代码注意，
super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A() // A
new B() // B
复制代码上面代码中，
new.target指向当前正在执行的函数。可以看到，在super()执行时，它指向的是子类B的构造函数，而不是父类A的构造函数。也就是说，super()内部的this指向的是B。
super 当做对象使用
- 第二种情况,
super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
class A {
p() {
return 2;
}
}
class B extends A {
constructor() {
super();
console.log(super.p()); // 2
}
}
let b = new B();
复制代码