js 继承

js继承有四种方式

1. 构造函数绑定

使用call或apply方法，将父对象的构造函数绑定在子对象上，即在子对象构造函数中加一行：

function Animal(){
  this.species = "Animal";
}
function Cat(name, color){
  Animal.apply(this, arguments);
  this.name = name;
  this. color = color;
}
var cat1 = new Cat("mimi","yellow");
alert(cat1.species);//Animal

缺点：无法实现函数复用

2. prototype 模式

Cat.prototype = new Animal();
Cat.prototype.constructor = Cat;
var cat1 = new Cat("mimi", "yellow");
alert(cat1.species);//Animal

3. 组合继承

function Animal(){}
Animal.prototype.species = "Animal"
function Cat(name,color){
  Animal.call(this);
}
Cat.prototype = new Animal();
var cat1 = new Cat("mimi", "yellow");
alert(cat1.species);//Animal

4. 利用空对象作为中介

((function(){
ler Super = function{};
super.prototype = Animal.prototype;
Cat.prototype = new Super();
})();

Cat.prototype.constructer = Cat;
var cat1 = new Cat("大毛","黄色");　alert(cat1.species); // 动物

5.ES6实现继承

class可以通过extends实现继承

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

子类必须在 constructor方法中调用super方法，否则新建实例时会报错
另外，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错

Object.getPrototypeOf()

Object.getPrototypeOf(ColorPoint) === Point

因此，可以使用这个方法判断，一个类是否继承了另一个类

super关键字

super作为函数调用时，代表父类的构造函数，ES6要求，子类的构造函数必须执行一次super函数

super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部this指向的是B
作为函数，super只能用在子类的构造函数中。
第二种情况，super作为对象时，在普通方法中，指向父类的原型对象（prototype）；在静态方法中，指向父类

class A{
  p(){
      return 2;
  }
}
class B extend A{
  constructor(){
    super();
    console.log(super.p());
  }
}
let b  = new  B();

上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。这时，super在普通方法之中，指向A.prototype，所以super.p()就相当于A.prototype.p()

ES6规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例；

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}
let b = new B();
b.m() // 2

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

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3;
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

上面代码中，super.x 赋值为3，这时等同于this.x 赋值为3；而当读取super.x的时候，读的是A.prototype.x, 所以返回undefinded

class A {}
A.prototype.x = 2;

class B extends A {
  constructor() {
    super();
    console.log(super.x) // 2
  }
}
let b = new B();

上面代码中，属性x是定义在A.prototype上面的，所以super.x可以取得值

ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

class A {
  constructor() {
    this.x = 1;
  }
  print() {
    console.log(this.x);
  }
}
class B extends A {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}
let b = new B();
b.m() // 2

上面代码中，super.print()虽然调用的是A.prototype.print(),但是A.prototype.print()内部的this指向子类B的实例，导致输出的是2，而不是1

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

class Parent {
  static myMethod(msg) {
    console.log('static', msg);
  }
  myMethod(msg) {
    console.log('instance', msg);
  }
}
class Child extends Parent {
  static myMethod(msg) {
    super.myMethod(msg);
  }
  myMethod(msg) {
    super.myMethod(msg);
  }
}
Child.myMethod(1); // static 1
var child = new Child();
child.myMethod(2); // instance 2