class 继承

一些概念：

父类===基类===超类 子类===派生类

介绍：

ES5 中修改原型链来实现继承

ES6 中通过 extends 来实现继承

ES6 中 子类 必须调用 super 方法，来执行 父类（基类）的 constructor 函数

子类在未调用 super 方法之前，如果使用了 this ，将会报错

Object.getPrototypeOf

可以通过 Object.getPrototypeOf 来获取子类的父类。

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

class People { 
    name: string;
    constructor(name: string) {
        this.name = name;
    }
}

class Stud extends People{
    constructor(name:string) {
        super(name);
    }
}

console.log(Object.getPrototypeOf(Stud) === People); //true

super 关键字的使用

注意：

• 使用 super 关键字，必须显示的指定它是作为函数还是对象来使用，如果直接使用将会报错！

  eg. 
  console.log(super) // 这是不被允许的

   

• super 关键字如果使用在对象里（不是class 里），指向对象的原型（obj.__proto__）

super 关键字既可以当 对象 来使用 也可以当 函数 来使用

（1）作为函数

作为函数， super() 方法只能用在子类的构造函数之中，用在其他地方会报错

class A {
  constructor() {
    console.log(new.target.name);
  }
}
class B extends A {
  constructor() {
    super();
  }
}
new A() // A
new B() // B

（2）作为对象

（一）在普通的函数中使用 super 对象 —— super 指向的是 父类的原型对象

• ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。
• super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

（二）在静态的函数中使用 super 对象 —— super 指向的是 父类

• 在子类的静态方法中通过super调用父类的方法时, 方法内部的 this指向当前的子类，而不是子类的实例。

例子：

class A {
  constructor(name) {
    this.name = name;
    console.log(new.target.name);
  }
  sayName() {}     
}

class B extends A {
  constructor() {
    super();
  }
  sayName() {
    super.sayName();
    //super.sayName === A.prototype.sayName ===> true
    //super如果是一个对象 指向的就是 A.prototype
  }
}

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(); //实际上执行的是 super.print.call(this);
  }
}

let b = new B();
b.m() // 2

 

super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

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

class B extends A {
  constructor() {
    super();
    this.x = 2;
    super.x = 3; //typescript 中不允许这样的修改
    console.log(super.x); // undefined
    console.log(this.x); // 3
  }
}

let b = new B();

类的 prototype 和 __proto__ 属性

• 子类的 __proto__ 属性指向的是 父类（作为一个对象，子类（B）的原型（__proto__属性）是父类（A））
• 子类的 prototype 的 __proto__ 属性指向的是 父类的原型（作为一个构造函数，子类（B）的原型对象（prototype属性）是父类的原型对象（prototype属性）的实例）

class A {
}

class B extends A {
}

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

ps: Object.setPrototypeOf(A,B) 的实现方式如下：

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

class 的继承则相当于：

class A{}

class B{}

// B.prototype.__proto__ === A.prototype 
// --> 子类的 prototype 的 __proto__ 指向父类的 prototype

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


// B.__proto__ === A
// 子类的 __proto__ 指向父类
Object.setPrototypeOf(B, A);

实例的 __proto__ 属性

子类实例的__proto__属性的__proto__属性，指向父类实例的__proto__属性（指向父类的prototype）

因此，通过子类实例的__proto__.__proto__属性，可以修改父类实例的行为。