class的继承（笔记）

子类通过extends关键字继承父类。

class Par{
    constructor(){
        this.num=21;
    }
}
class  Chil  extends Par{
    constructor(){
      //继承父类的构造函数constructor
        super() //这里必须写，否则下面实例会报错。
    }
}

var p=new Chil();
console.dir(p.num) //21

注意：子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

ES5 继承和ES6 继承对比

• ES5 的继承机制：是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。
• ES6 的继承机制：是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

super关键字

1.可以当函数用。
super作为函数调用时，代表父类的构造函数。

class A {}

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

注意：

• super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。
• super只能用在子类的constructor中。

2.可以作为对象使用。
super 作为对象使用时, 在普通的方法中，指向的是父类的原型对象。在静态方法中，指向的是父类。

class A {
  constructor() {
    // 这里是实例上的属性
    this.p = 1;
  }
  // 普通方法，放在A原型上的。
  say(){
    console.log("普通方法")
  }
  // 静态方法，能被子类继承，但是不能被实例化对象继承。
  static greeting(){
    console.log("静态方法")
  }
}
// 静态属性
A.age=22;

class B extends A {
  constructor(){
    super();
  }
  bsay(){
    // p是实例的属性，通过this访问
      console.log(this.p) //1
    // 在普通方法中，super指向的是父类原型对象，即prototype，
    // 所以能访问父类原型上的方法。
    super.say() // "普通方法";
  }
  static bgreeting(){
    // 在静态方法中，super指向的是父类，能访问父类的静态属性和静态方法。
    super.greeting(); //"静态方法"
    console.log(super.age); //22
  }
}

let xiao = new B();
xiao.bsay();
B.bgreeting(); 

要点总结：

• 静态方法，能被子类继承，不能被实例对象继承。
• 因为普通方法中，super指向的是父类原型对象。所以子类中，通过super只能访问到父类原型上的方法。
• 在静态方法中，super指向的是父类，只能访问父类的静态属性和静态方法。
• 普通方法中，this指向的是当前类的实例对象。
• 静态方法中，this指向的是当前类。

类的 prototype 属性和proto属性

类同时有prototype属性和__proto__属性，因此同时存在两条继承链。
例子：

class Par{
    constructor(){
        // ....
    }
    say(){
        console.log("我今年"+this.age+"岁了！")
    }
    static greeting(){
        console.log("hello")
    }
}
Par.num=101;
class  Chil  extends Par{
    constructor(){
        super()
    }
}
console.dir(Chil)

• 子类的__proto__属性 ,指向父类。
  即Chil.__proto__ === Par
  image.png

• 子类prototype属性的__proto__属性，指向父类的prototype属性。
  即Chil.prototype.__proto__ === Par.prototype
  

  image.png

• 子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性。也就是说，子类的原型的原型，是父类的原型。
  即Chil.__proto__.__proto__ === Par.__proto__

原生构造函数继承

• Boolean()

• Number()

• String()

• Array()

• Date()

• Function()

• RegExp()

• Error()

• Object()

• ES5 是先新建子类的实例对象this，再将父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数。

• ES6 允许继承原生构造函数定义子类，因为 ES6 是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。

class MyArray extends Array {
  constructor(...args) {
    super(...args);
  }
}

var arr = new MyArray();
arr[0] = 12;
arr.length // 1

arr.length = 0;
arr[0] // undefined