ES6新特性10-class 的继承

上一篇介绍了class的基本使用。下面我们来研究学习一下class的继承。在ES6之前js是通过原型和原型链来实现对象对象的继承。
Class之间可以通过extends关键字实现继承

基本样例

class Parent {
    constructor(x,y){
        this.x=x;
        this.y=y;
    }
    
    toString(){
         Object.entries(this).map((item)=>{
             console.log(item)
          })
    }
}
class Child extends Parent{
    constructor(x,y,z){
       super(x,y);//指的是调用父级构造函数
       this.z=z;
    }
    
}
var child=new Child(1,2,3);
child.toString(); //["x":1] ["y":2] ["z":3] 

子类如果不写构造函数，就会默认调用父类的构造函数，但是如果子类写了构造函数，必须在函数内部调用super（）方法
在子类的构造函数中，只有调用super之后，才可以使用this关键字

class Child extends Parent{
    constructor(x,y,z){
     //  super(x,y)  //注释掉会报错
       this.z=z;
      //  super(x,y// 在这调用会报错 ReferenceError
    }
    
}
var child=new Child(1,2,3);
//Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructo

---

类的prototype属性和__ proto__属性

Class作为构造函数的语法糖，同时有prototype属性和 __ proto__ 属性，因此同时存在两条继承链。
子类的__ proto__属性，表示构造函数的继承，总是指向父类

Child.__proto__===Parent；//true

子类prototype属性的 __ proto __ 属性，代表方法的继承，总是指向父类的prototype属性

Child.prototype.__proto__===Parent.prototype //true

子类实例的 __ proto __ 属性的 __ proto __ 属性，指向父类实例的__ proto __属性。也就是说，子类的原型的原型，是父类的原型。

c.__proto__.__proto__===p.__proto__;//true

image.png

---

super

关键字super既可以当函数使用，又可以当对象使用。
当函数使用
在子类的构造函数中使用，子类的构造函数必须执行一次super函数。
注意: super 虽然是执行父类的构造函数，但是super内部的this 却是指向子类,相当于A.prototype.constructor.call(this)。作为函数使用时只能在构造函数使用
new.target指向当前正在执行的函数，看下面代码打印出的值。

class Parent {
    constructor(x,y){
        this.x=x;
        this.y=y;
        console.log(new.target.name); //打印出是Child
      
    }
    
    toString(){
          
         Object.entries(this).map((item)=>{
             console.log(item)
          })
    }
}
class Child extends Parent{
    constructor(x,y,z){
       super(x,y);//指的是调用父级构造函数
       this.z=z;
    }
    
}
var child=new Child(1,2,3);

当做对象使用:在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
在普通方法中，指向父类的prototype，只能调用父类原型对象上定义的方法，不能调用父类实例上的方法和属性。
通过super调用父类的方法时，super会绑定子类的this。
以上可总结出：赋值和调用父类原型对象上的的方法的时候super就可以认为是子类的this。

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

}

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3; //此时就代表this
    console.log(super.x); //undefined取值的时候，只能调用原型对象上的属性，父类原型对象上没有x属性
    console.log(this.x); // 3
  }
}

let b = new B();