简介

  1.       class Person {
  2.          constructor(name, age,sex){
  3.              //constructor 上的属性 是实例对象的属性
  4.           this.name =name;
  5.           this.age =age;
  6.           this.sex =sex;
  7.           this.speak = this.speak.bind(this);
  8.          }
  9.          speak(){
  10.              // speack 方法是 原型对象的属性，供 实例对象调用。
  11.              console.log(this);
  12.             console.log(`大家好，我叫${this.name},今年${this.age}岁了,-----------  `)
  13.          }
  14.       }
  15.       class Student extends Person {
  16.           // 子类 可以继承父类上的实例对象的属性 也能继承父类原型对象的属性
  17.           constructor(name,age,sex,grand){
  18.               //super()  如果不传参数给父元素 控制台会输出 undefend 的 name、age、sex、
  19.               super(name,age,sex);
  20.               this.grand =grand;
  21.           }
  22.           speak(){
  23.               console.log(`大家好，我叫${this.name},今年${this.age}岁,是一名${this.sex}生,今年读${this.grand}`)
  24.           }
  25.       }
  26.       const p2 =new Student('李四',15,"男",'高一');
  27.       p2.speak();

Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多

  1. class Point {
  2. }
  4. class ColorPoint extends Point {
  5. }

子类必须在constructor 方法中调用super方法，否则新建实例会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super 方法，子类就得不到this对象。同时子类定义自身的实例属性必须写到super后面 ，这样才能调用this。
ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this

  1. class Point { /* ... */ }
  3. class ColorPoint extends Point {
  4.   constructor() {
  5.   }
  6. }
  8. let cp = new ColorPoint(); // ReferenceError

另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例

  1. class Point {
  2.   constructor(x, y) {
  3.     this.x = x;
  4.     this.y = y;
  5.   }
  6. }
  8. class ColorPoint extends Point {
  9.   constructor(x, y, color) {
  10.     this.color = color; // ReferenceError
  11.     super(x, y);
  12.     this.color = color; // 正确
  13.   }
  14. }

最后，父类的静态方法，也会被子类继承

  1. class A {
  2.   static hello() {
  3.     console.log('hello world');
  4.   }
  5. }
  7. class B extends A {
  8. }
  10. B.hello()  // hello world

Object.getPrototypeOf()

Object.getPrototypeOf 方法可以用来从子类上获取父类
因此，可以使用这个方法判断，一个类是否继承另外一个类

  1. Object.getPrototypeOf(ColorPoint) === Point  //true

super 关键字

super 这个关键字，既可以当作函数使用，也可以当作对象使用。
super 作为函数调用时，代表父类的构造函数。ES6要求，子类的构造函数必须执行一次super函数，否则JavaScript
引擎报错。
注意：super 虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super() 在这里相当于 A.prototype.constructor.call(this)

  1. class A {
  2.   constructor() {
  3.     console.log(new.target.name);
  4.   }
  5. }
  6. class B extends A {
  7.   constructor() {
  8.     super();
  9.   }
  10. }
  11. new A() // A
  12. new B() // B

super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
子类的B当中的super.p(),就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype,所以super.p()相当于A.prototype.p()。
这里需要注意的是，由于super指向父类的原型对象，所以定义在父类实例上的方法或者属性，是无法通过super调用的

  1. class A {
  2.   p() {
  3.     return 2;
  4.   }
  5. }
  7. class B extends A {
  8.   constructor() {
  9.     super();
  10.     console.log(super.p()); // 2
  11.   }
  12. }
  14. let b = new B();
  15. -----------------------------------------------------------------------------------------
  16.   class A {
  17.   constructor() {
  18.     this.p = 2;
  19.   }
  20. }
  22. class B extends A {
  23.   get m() {
  24.     return super.p;
  25.   }
  26. }
  28. let b = new B();
  29. b.m // undefined
  30. //p是父类A实例的属性，super.p就引用不到它
  31. //如果属性定义在父类的原型对象上，super就可以取到

ES6 规定，在子类普通方法中通过 super调用父类的方法时，方法内部的this指向子类的实例
super.print() 尽管调用了 A.prototype.print(),但是A.prototype.print()内部的this内部的this指向子类B的实例，导致输出的时2，而不是1.也就是说，实际上执行的是 super.print.call(this)
由于this 指向子类实例，所以如果通过super 对某个属性赋值，这时super 就是this,赋值的属性会变成子类实例的属性。

  1. class A {
  2.   constructor() {
  3.     this.x = 1;
  4.   }
  5.   print() {
  6.     console.log(this.x);
  7.   }
  8. }
  10. class B extends A {
  11.   constructor() {
  12.     super();
  13.     this.x = 2;
  14.   }
  15.   m() {
  16.     super.print();
  17.   }
  18. }
  20. let b = new B();
  21. b.m() // 2

如果super 作为对象，用在静态的方法中，这时super 指向父类，而不是父类的原型对象。
super在静态方法之中指向父类，在普通的方法之中指向父类的原型对象。

  1. class Parent {
  2.   static myMethod(msg) {
  3.     console.log('static', msg);
  4.   }
  6.   myMethod(msg) {
  7.     console.log('instance', msg);
  8.   }
  9. }
  11. class Child extends Parent {
  12.   static myMethod(msg) {
  13.     super.myMethod(msg);
  14.   }
  16.   myMethod(msg) {
  17.     super.myMethod(msg);
  18.   }
  19. }
  21. Child.myMethod(1); // static 1
  23. var child = new Child();
  24. child.myMethod(2); // instance 2

另外，在子类的静态方法中通过super 调用父类的方法时，方法的内部的this指向当前的子类，而不是子类的实例。
代码中，静态方法B.m 里面，super.print 指向了 父类的静态方法，这个方法里面的this指向的是B,而不是B的实例

  1. class A {
  2.   constructor() {
  3.     this.x = 1;
  4.   }
  5.   static print() {
  6.     console.log(this.x);
  7.   }
  8. }
  10. class B extends A {
  11.   constructor() {
  12.     super();
  13.     this.x = 2;
  14.   }
  15.   static m() {
  16.     super.print();
  17.   }
  18. }
  20. B.x = 3;
  21. B.m() // 3

对象总是继承其他的对象的，所以可以在任意一个对象中，使用super关键字

  1. var obj = {
  2.   toString() {
  3.     return "MyObject: " + super.toString();
  4.   }
  5. };
  7. obj.toString(); // MyObject: [object Object]

总结

作为函数调用的时候
1.super作为函数调用时，代表父类的构造函数，但是返回的是子类的实例，super内部的this指的是子类的实例，相当于super() 在这里相当于parents.prototype.constructor.call(this);
作为对象进行调用
在普通方法中，指向父类的原型对象；ES6 规定，在子类普通方法中通过 super调用父类的方法时，方法内部的this指向子类的实例，
子类的B当中的super.p(),就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype,所以super.p()相当于A.prototype.p()，注意：super指向父类的原型对象，所以定义在父类实例上的方法或者属性，是无法通过super调用的，由于this 指向子类实例，所以如果通过super 对某个属性赋值，这时super 就是this,赋值的属性会变成子类实例的属性

在静态方法中指向父类.而不是父类的原型对象
在子类的静态方法中通过super 调用父类的方法时，方法的内部的this指向当前的子类，而不是子类的实例
静态方法B.m 里面，super.print 指向了 父类的静态方法，这个方法里面的this指向的是子类,而不是子类的实例