ES6 学习笔记(16) Class 继承

1. 简介

---

Class可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。

  class Point {
  }

  class ColorPoint extends Point {
  }

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

  class ColorPoint extends Point {
  }
  
// 等同于
  class ColorPoint extends Point {
    constructor(...args) {
      super(...args);
    }
  }
 // 只有调用super之后，才可以使用this关键字，否则会报错。
  class ColorPoint extends Point {
    constructor(x, y, color) {
      this.color = color; // ReferenceError
      super(x, y);
      this.color = color; // 正确
    }
  }

2. Object.getPrototypeOf()

---

Object.getPrototypeOf方法可以用来从子类上获取父类。可以使用这个方法判断，一个类是否继承了另一个类。

3. super 关键字

---

第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次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就可以取到。
ES6 规定，通过super调用父类的方法时，方法内部的this指向子类。
注意，使用super的时候，必须显式指定是作为函数、还是作为对象使用，否则会报错。

4. 类的 prototype 属性和proto属性

---

（1）子类的__proto__属性，表示构造函数的继承，总是指向父类。

（2）子类prototype属性的__proto__属性，表示方法的继承，总是指向父类的prototype属性。

5. 原生构造函数的继承

---

原生构造函数是指语言内置的构造函数，通常用来生成数据结构。

• ECMAScript 的原生构造函数大致有下面这些。
  Boolean()
  Number()
  String()
  Array()
  Date()
  Function()
  RegExp()
  Error()
  Object()

以前，这些原生构造函数是无法继承的，比如，不能自己定义一个Array的子类。
ES6 允许继承原生构造函数定义子类，因为 ES6 是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。

  class MyArray extends Array {
    constructor(...args) {
      super(...args);
    }
  }

  var arr = new MyArray();
  arr[0] = 12;
  arr.length // 1

  arr.length = 0;
  arr[0] // undefined

6. Mixin 模式的实现

---

Mixin 指的是多个对象合成一个新的对象，新对象具有各个组成成员的接口。它的最简单实现如下。

  const a = {
    a: 'a'
  };
  const b = {
    b: 'b'
  };
  const c = {...a, ...b}; // {a: 'a', b: 'b'}

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

  function mix(...mixins) {
    class Mix {}

    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);
      }
    }
  }