ECMA2015(ES6)简单入门-5-class的继承

class可以通过extend关键字实现继承，Es5是通过原型链继承。

class Point{
}
class ColorPoint extends Point{
}
上述代码定义一个ColorPoint类，该类通过extend关键字，继承了Point类的所有属性和方法。但是由于没有部署代码。两个类完全一样，等于是复制了一个Point类
，下面加入代码

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方法和toString方法都都出现了super关键字，它在这里表示父类的构造函数，用来新建父类的this对象

子类表示父类的构造函数，用来新建父类的this对象，子类必须在constructor方法中条用super方法否则，新建实例时会报错
因为子类自己的this对象必须先通过父类的构造函数完成构造，得到父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法，如果不调用super方法，子类就得不到this对象。

如果子类没有定义constructor方法，这个方法会被默认添加，代码如下，

class ColorPoint extends Point{}
class ColorPoint extends Point{
constructor(...args){
super(...args)
}
}

另外一个主意的地方是 constructor方法没有调用super之前就使用this关键字，结果会报错，而放在super方法之后就是正确的

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

父类的静态方法也会被子类继承

class A {
static hello(){
console.log('hello world')
}
}
class B extends A {
}
B.hello()

2,Object.getPrototypeOf()方法可以从子类上获取父类

Object.getPrototypeOf(ColorPoint)===Point

3super关键字，既可以当函数用哪个，也可以当对象用，在这两种情况下，她的用法完全不同

1，有一种情况，super作为函数调用时，代表父类的构造函数，es6要求你，子类的构造函数必须执行一次super函数

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

注意，super代表的是A的构造函数，但却反悔的是B的实例，即this指的是B的实例，因此，super在这里相当于
A.prototype.constructor.call(this)
super（）内部this指向的是B
且只能用在子类的构造函数中

class A {}

class B extends A {
  m() {
    super(); // 报错
  }
}

第二种情况，super作为对象时，在普通方法中，指向父类的原型对象，在静态方法中，指向父类

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

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

这里需要注意，super指向父类的原型对象，所以定义在父类实例上的方法或属性时无法通过super调用的

class A{
constructor(){
this.p = 2}
}
class B extends A {
get m(){
return super.p}
}
let b = new B()
b.m()//undefined

上述代码中p是父类A实例上的属性，super.p就引用不到它。
如果属性定义在原型对象上，super就可以取到

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

上面代码中
x是定义在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()但是，A.prototype。print()内部的this指向B的实例，导致输出的是2，而不是1，实际执行的是super.print.call（this）

类的prototype属性和__proto__属性
多数浏览器的Es5实现之中每一个对象都有 __proto__属性，指向对应的构造函数的prototype属性，class作为构造函数的语法糖，同时有prototype属性和 __proto__属性，
子类的 __proto__属性表示构造函数的继承，总是指向父类
子类的prototype属性的 __proto__表示方法的继承总是指向父类的prototype属性

class A{}

class B extends A{}

B. proto === A
B.prototype. proto === A.prototype

上面代码中，子类的B的 __proto__属性指向父类的A，子类的B的prototype属性的 __proto__属性指向父类的prototype属性
这样的结果是因为
类的继承是通过Object.setPrototypeOf方法实现的

Object.setPrototypeOf = function (obj, proto) {
  obj.__proto__ = proto;
  return obj;
}
//  因此
Object.setPrototypeOf(B.prototype, A.prototype);
// 等同于
B.prototype.__proto__ = A.prototype;

Object.setPrototypeOf(B, A);
// 等同于
B.__proto__ = A;

原生构造函数的继承
原生构造函数指js内置的构造函数
有
Boolean()
Number()
String()
Object()
Date()
Error()
Function()
Array()
RegExp()
这些函数是无法继承的，
Mixin模式的实现
指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口，它的最简单实现如下

const a={
	a：‘a’
}
const b ={
	b：‘b’
}
const c = {...a, ...b}

c对象是a和b对象的合成，具有两者的接口

下面是一个更完备的实现，将多个类的接口“混入”（mix in）另一个类。

function mix(...mixins) {
  class Mix {
    constructor() {
      for (let mixin of mixins) {
        copyProperties(this, new mixin()); // 拷贝实例属性
      }
    }
  }

  for (let mixin of mixins) {
    copyProperties(Mix, mixin); // 拷贝静态属性
    copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
  }

  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== 'constructor'
      && key !== 'prototype'
      && key !== 'name'
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}

上面代码的mix函数，可以将多个对象合成为一个类。使用的时候，只要继承这个类即可。

class DistributedEdit extends mix(Loggable, Serializable) {
  // ...
}