TypeScript - ES6 中的 Class 继承

class MyClass {
 
  // 属性； class 字段 prop 会在在每个独立对象中被设好，而不是设在 Myclass.prototype
  prop = value;
 
  // 属性； class 字段 prop 更优雅的绑定方法
  prop = () => { }
 
  // 构造器
  constructor(...) { }
 
  // method
  method(...) { }
 
  // getter 方法
  get something(...) { }
 
  // setter 方法
  set something(...) { }
 
  // 有计算名称（computed name）的方法（此处为 symbol）
  [Symbol.iterator]() { }
 
}

// ES6中
 
class MyClass {
  	_name = 'shanejix'
 
    get name() {
        return this._name;
    }
 
    set name(newName) {
        this.name = newName;
    }
}
 
 
// ** getter 和 setter 会被写到 MyClass.prototype上 **
 
 
// ES5中对应实现
 
function MyClass(){
  this._name = 'shanejix'
};
 
MyClass.prototype =  {
 
    get name() {
        return this._name;
    }
 
    set name(newName) {
        this.name = newName;
    }
}

* 在内部，关键字 extends 使用了很好的旧的原型机制进行工作

- 它将 Child.prototype.[[Prototype]] 设置为 Parent.prototype

function f(phrase) {
  return class {
    sayHi() {
      alert(phrase)
    }
  }
}
 
class User extends f("Hello") {}
 
new User().sayHi() // Hello
 
// 这对于高级编程模式，例如当根据许多条件使用函数生成类，并继承它们时来说可能很有用

* 默认情况下，所有未在 class child 中指定的方法均从 class Parent 中直接获取

- 执行 super.method(...) 来调用一个父类方法

- 执行 super(...) 来调用一个父类 constructor（只能在子类的 constructor 中）

// 根据 规范，如果一个类扩展了另一个类并且没有 constructor，那么将生成下面这样的 constructor：
 
class Child extends Parent {
  // 为没有自己的 constructor 的扩展类生成的
  constructor(...args) {
    super(...args)
  }
}

* 在 JavaScript 中，【继承类的构造函数】（所谓的“派生构造器”，英文为 “derived constructor”）与其他函数之间是有区别的

- 派生构造器具有特殊的内部属性 [[ConstructorKind]]:"derived"； // 这是一个特殊的内部标签


该标签会【影响它的 new 行为】：

  - 当通过 new 执行一个常规函数时，它将创建一个空对象，并将这个空对象赋值给 this ;

  - 但是,当继承的 constructor 执行时，它不会执行此操作；

  - 它期望父类的 constructor 来完成这项工作;


* 因此，派生的 constructor 必须调用 super 才能执行其父类（base）的 constructor，否则 this 指向的那个对象将不会被创建

class Animal {
  name = "animal"
 
  constructor() {
    alert(this.name) // (*)
  }
}
 
class Rabbit extends Animal {
  name = "rabbit"
}
 
new Animal() // animal
new Rabbit() // animal
 
// 两种情况下：new Animal() 和 new Rabbit()，在 (*) 行的 alert 都打印了 animal
 
// 有点懵逼，用方法来进行比较：
 
class Animal {
  showName() {
    // 而不是 this.name = 'animal'
    alert("animal")
  }
 
  constructor() {
    this.showName() // 而不是 alert(this.name);
  }
}
 
class Rabbit extends Animal {
  showName() {
    alert("rabbit")
  }
}
 
new Animal() // animal
new Rabbit() // rabbit
 
// 请注意：这时的输出是不同的
 
// 这才是本来所期待的结果。当父类构造器在派生的类中被调用时，它会使用被重写的方法；……但对于类字段并非如此。正如前文所述，父类构造器总是使用父类的字段

原因在于类字段初始化的顺序:

- 对于基类（还未继承任何东西的那种），在构造函数调用前初始化

- 对于派生类，在 super() 后立刻初始化

把一个方法赋值给类的函数本身，而不是赋给它的 "prototype"


这样的方法被称为 静态的（static）

class User {
  static staticMethod() {
    alert(this === User)
  }
}
 
User.staticMethod() // true
 
// 和作为属性赋值的作用相同
 
class User {}
 
User.staticMethod = function () {
  alert(this === User)
}
 
User.staticMethod() // true

静态方法被用于实现属于整个类的功能;它与具体的类实例无关

静态属性类似静态方法

class Article {
  static publisher = "Levi Ding"
}
 
alert(Article.publisher) // Levi Ding
 
// 等同于直接给 Article 赋值：
 
Article.publisher = "Levi Ding"

静态属性被用于想要存储类级别的数据时，而不是绑定到实例

- 静态属性和方法是可被继承的

- 继承对常规方法和静态方法都有效

class Animal {
  static planet = "Earth"
 
  constructor(name, speed) {
    this.speed = speed
    this.name = name
  }
 
  run(speed = 0) {
    this.speed += speed
    alert(`${this.name} runs with speed ${this.speed}.`)
  }
 
  static compare(animalA, animalB) {
    return animalA.speed - animalB.speed
  }
}
 
// 继承于 Animal
class Rabbit extends Animal {
  hide() {
    alert(`${this.name} hides!`)
  }
}
 
let rabbits = [new Rabbit("White Rabbit", 10), new Rabbit("Black Rabbit", 5)]
 
rabbits.sort(Rabbit.compare)
 
rabbits[0].run() // Black Rabbit runs with speed 5.
 
alert(Rabbit.planet) // Earth

Rabbit extends Animal 创建了两个 [[Prototype]] 引用：

- 1. Rabbit 函数原型继承自 Animal 函数

- 2. Rabbit.prototype 原型继承自 Animal.prototype

class Animal {}
class Rabbit extends Animal {}
 
// 对于静态的
alert(Rabbit.__proto__ === Animal) // true
 
// 对于常规方法
alert(Rabbit.prototype.__proto__ === Animal.prototype) // true

class Person {
  constructor(name) {
    this.name = name
  }
}

function _classCallCheck(instance, Constructor) {
  if (!_instanceof(instance, Constructor)) {
    throw new TypeError("Cannot call a class as a function")
  }
}
 
var Person = /*#__PURE__*/ _createClass(function Person(name) {
  _classCallCheck(this, Person)
 
  this.name = name
})

class Person {
  constructor(name) {
    this.name = name
  }
 
  sayHello() {
    return "hello, I am " + this.name
  }
 
  static onlySayHello() {
    return "hello"
  }
 
  get name() {
    return "shane"
  }
 
  set name(newName) {
    console.log("new name 为：" + newName)
  }
}

"use strict"
 
var _createClass = (function () {
  function defineProperties(target, props) {
    for (var i = 0; i < props.length; i++) {
      var descriptor = props[i]
      descriptor.enumerable = descriptor.enumerable || false
      descriptor.configurable = true
      if ("value" in descriptor) {
        descriptor.writable = true
      }
      Object.defineProperty(target, descriptor.key, descriptor)
    }
  }
  return function (Constructor, protoProps, staticProps) {
    if (protoProps) {
      defineProperties(Constructor.prototype, protoProps)
    }
    if (staticProps) {
      defineProperties(Constructor, staticProps)
    }
    return Constructor
  }
})()
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function")
  }
}
 
var Person = (function () {
  function Person(name) {
    _classCallCheck(this, Person)
 
    this.name = name
  }
 
  _createClass(
    Person,
    [
      {
        key: "sayHello",
        value: function sayHello() {
          return "hello, I am " + this.name
        },
      },
      {
        key: "name",
        get: function get() {
          return "kevin"
        },
        set: function set(newName) {
          console.log("new name 为：" + newName)
        },
      },
    ],
    [
      {
        key: "onlySayHello",
        value: function onlySayHello() {
          return "hello"
        },
      },
    ],
  )
 
  return Person
})()

class Parent {
  constructor(name) {
    this.name = name
  }
}
 
class Child extends Parent {
  constructor(name, age) {
    super(name)
    this.age = age
  }
}
 
var child1 = new Child("kevin", "18")
 
console.log(child1)

"use strict"
 
function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self
}
 
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError(
      "Super expression must either be null or a function, not " + typeof superClass,
    )
  }
 
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true,
    },
  })
 
  if (superClass) {
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass)
  }
}
 
function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function")
  }
}
 
var Parent = function Parent(name) {
  _classCallCheck(this, Parent)
 
  this.name = name
}
 
var Child = (function (_Parent) {
  _inherits(Child, _Parent)
 
  function Child(name, age) {
    _classCallCheck(this, Child)
 
    // 调用父类的 constructor(name)
    var _this = _possibleConstructorReturn(
      this,
      (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name),
    )
 
    _this.age = age
    return _this
  }
 
  return Child
})(Parent)
 
var child1 = new Child("kevin", "18")
 
console.log(child1)

function _inherits(subClass, superClass) {
  // extend 的继承目标必须是函数或者是 null
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError(
      "Super expression must either be null or a function, not " + typeof superClass,
    )
  }
 
  // 类似于 ES5 的寄生组合式继承，
  // 使用 Object.create，设置子类 prototype 属性的 __proto__ 属性指向父类的 prototype 属性
  // 并给子类添加一个可配置可写不可枚举的 constructor 属性，该属性值为 subClass
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true,
    },
  })
 
  // 设置子类的 __proto__ 属性指向父类
  if (superClass) {
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass)
  }
}

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called")
  }
  return call && (typeof call === "object" || typeof call === "function") ? call : self
}

class Parent {
  constructor() {
    this.xxx = xxx
  }
}
 
// 没有显示的 return 默认 return undefined
 
class Parent {
  constructor() {
    return null
  }
}
 
// 可以 return 各种类型 比如 null

var Child = (function (_Parent) {
  _inherits(Child, _Parent)
 
  function Child(name, age) {
    _classCallCheck(this, Child)
 
    var _this = _possibleConstructorReturn(
      this,
      (Child.__proto__ || Object.getPrototypeOf(Child)).call(this, name),
    )
 
    _this.age = age
    return _this
  }
 
  return Child
})(Parent)