class的继承

class的继承！

一、实现一个继承；

先来看一个简单的例子

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return this.x + '-' + this.y
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

let p = new ColorPoint(10,20,'red')

// ColorPoint {x: 10, y: 20, color: 'red'}
//  color: "red"
//  x: 10
//  y: 20

上面的例子是一个比较简单的继承；ES6类的继承；在子类中需要调用super，super指向的就是父类的构造器；将参数传给父类，并且将父类构造器中的this指向子类构造的实例，这就是我们为什么要调用super的原因；

二、扩展

如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法；

class ColorPoint extends Point {

}

// 等同于
class ColorPoint extends Point {
  constructor(...args) {
    super(...args);
  }
}

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

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

三、剖析super的原理；

两种情况，第一种当super被当作函数执行时，第二种当super被当作对象使用时；

class A {}

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

先来看一下super做了什么，通过上面的内容可以知道super首先是先调用了父类的构造器，然后再将父类构造器中的this指向了子类，因此可以简单的认为；

super == A.constructor.apply(this,args)  // 其中this是b类的实例

// super -->  Parent.constructor.apply(this,args)
// 温馨提示：super不能被当作函数在方法里面执行否则会报错；

上面的情况时super被当作函数执行时；当super被当作对象执行时，可以在方法中调用；

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();
// 这里需要注意，由于super指向父类的原型对象，所以定义在父类实例上的方法或属性，是无法通过super调用的。

此时super作为对象时，在普通方法中或者构造函数中，指向父类的原型对象；在静态方法中，指向父类。

总结：super的调用位置和调用方法

1. 作为函数

• 只能在构造器中进行调用；指向父类的构造器

1. 作为对象

• 在构造器和函数中调用 指向 父类的原型对象
• 在静态方法中调用 指向 父类

四、继承相关

class A {
}

class B extends A {
}

B.__proto__ === A // true
B.prototype.__proto__ === A.prototype 

子类的__proto__ 属性永远指向自己的父类；子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

继承的原理

类的继承可以通过Object.setPrototypeOf()来进行实现；

// 例如
class A {}
class B extends A {}

// 要实现上述的继承关系，可以做到；

Object.setPrototypeOf(B.prototype , A.prototype)
Object.setPrototypeOf(B , A)

// 而在这里setPrototypeOf的实现可以是这样子的；

Object.setPrototypeOf = function (obj, proto){
  obj.__proto__ = proto;
  return obj;
}


// 所以

B.prototype.__proto__ = A.prototype;   // true
B.__proto__ = A  // true

实例的继承

// 例如
class A {}
class B extends A {}

const a = new A()
const b = new B()
a.__proto__ === b.__proto__ // false
a.__proto__.__proto__ === b.__proto__ // true