再理解es6 中的 class super extends

说明

• 适用于 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();
复制代码