ES6学习之Class的继承

一、class基本知识

1、class类简介

本质上，ES6 的类只是 ES5 的构造函数的一层包装，是基于javascript原型链机制开发的语法糖。类相当于实例的原型，所有在类中定义的方法，都会被实例继承。

class Point {
  constructor() {
    // ...
  }

  toString() {
    // ...
  }

  toValue() {
    // ...
  }
}

// 等同于

Point.prototype = {
  constructor() {}, //b.constructor === B.prototype.constructor 所以constructor()方法可以直接写在原型中
  toString() {},
  toValue() {},
};

在类的实例上面调用方法，其实就是调用原型上的方法。
prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。

class B {}
let b = new B();

b.constructor === B.prototype.constructor // true

2、关于class中的constructor() 方法

constructor方法是类的默认方法（用于初始化），通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。 这一点跟ES5中的构造函数是保持一致的。（ES5中new 一个构造函数 发生了什么？）

1、创建一个以这个函数为原型的空对象；
2、将函数的 prototype 赋值给对象的 proto 属性；
3、将对象作为函数的 this 传进去。如果有 return 对象的话就直接返回 return 的内容，没有的话就返回创建的这个对象；

class Foo {
  constructor() {
    return Object.create(null);
  }
}

new Foo() instanceof Foo
// false

3、this的指向

  class Logger {
    printName(name = 'there') {
      console.log('this', this) //undefined
      this.print(`Hello ${name}`);
    }

    print(text) {
      console.log(text);
    }
  }

  const logger = new Logger();
  // logger.printName();
  const { printName } = logger;
  printName();

上面代码中，printName方法中的this，默认指向Logger类的实例。但是，如果将这个方法提取出来单独使用，this会指向该方法运行时所在的环境，因为找不到print方法而导致报错。

解决办法：

1. 在构造方法中绑定this

class Logger {
  constructor() {
    this.printName = this.printName.bind(this);
  }

  // ...
}

2. 使用箭头函数。

  class Logger {
    constructor() { //用于初始化
        this.printName = (name = 'there') => {
          this.print(`Hello ${name}`);
        };
    }

    // printName(name = 'there') {
    //   console.log('this', this)
    //   this.print(`Hello ${name}`);
    // }

    print(text) {
      console.log(text);
    }
  }

  const logger = new Logger();
  // logger.printName();
  const { printName } = logger;
  printName();

3. 使用Proxy，获取方法的时候，自动绑定this。

  class Logger {
    printName(name = 'there') {
      console.log('this', this) //undefined
      this.print(`Hello ${name}`);
    }

    print(text) {
      console.log(text);
    }
  }

  const logger = new Logger();
  const log = selfish(logger);
  const { printName } = log;
  printName();
  
    //proxy代理函数
  function selfish (target) {
    const cache = new WeakMap();
    const handler = {
      get (target, key) {
        const value = Reflect.get(target, key);
        if (typeof value !== 'function') {
          return value;
        }
        if (!cache.has(value)) {
          cache.set(value, value.bind(target));
        }
        return cache.get(value);
      }
    };
    const proxy = new Proxy(target, handler);
    return proxy;
  }

4、Class 的取值函数（getter）和存值函数（setter）

与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数

class MyClass {
  constructor() {
    // ...
  }
  get prop() {
    return 'getter';
  }
  set prop(value) {
    console.log('setter: '+value);
  }
}

let inst = new MyClass();

inst.prop = 123;
// setter: 123

inst.prop
// 'getter'

5、Class 的静态方法

1. 不会被实例继承，只能通过类来调用

如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function

并且，静态方法中若调用this关键字，这个this指的是类，而不是实例。等同于调用Foo.baz。可以看到，静态方法可以与非静态方法重名。

class Foo {
  static bar () {
    this.baz();
  }
  static baz () {
    console.log('hello');
  }
  baz () {
    console.log('world');
  }
}

Foo.bar() // hello

2. 静态方法可以被子类继承

父类Foo有一个静态方法，子类Bar也可以调用这个方法。

class Foo {
    static classMethod() {
      return 'hello';
    }
}

class Bar extends Foo {
}

let res = Bar.classMethod()
console.log(res)  // 'hello'

3. 静态方法可以被子类通过super来调用

  class Foo {
    static classMethod() {
      return 'hello';
    }
  }

  class Bar extends Foo {
    static classMethod() {
      return super.classMethod() + ', too';
    }
  }

  let res = Bar.classMethod()
  console.log(res) // "hello, too"

6、Class 的静态属性和实例属性

静态属性指的是 Class 本身的属性。
实例属性是定义在实例对象（this）上的属性。

以前，我们定义实例属性，只能写在类的constructor方法里面。有了新的写法以后，可以不在constructor方法里面定义。???

class MyClass {
  myProp = 42;

  constructor() {
    console.log(this.myProp); // 42
  }
}

二、Class 的继承

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对象。

子类必须在constructor方法中调用super方法，否则新建实例时会报错，子类就得不到this对象。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工。如果不调用super方法，。即：子类实例的构建，基于父类实例，只有super方法才能调用父类实例。

ES5 的继承，实质是先创造子类的实例对象this，然后再将父类的方法添加到this上面（Parent.apply(this)）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到this上面（所以必须先调用super方法），然后再用子类的构造函数修改this。

1、super 关键字

super这个关键字，既可以当作函数使用，也可以当作对象使用。

• super作为函数使用

super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。并且，作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。

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

• super作为对象使用

在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

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

    // static get m() {
    //   return super.p;
    // }
  }

  let b = new B();
  console.log(b.m) // undefined 如果函数m不加get关键字 这里需要执行m函数console.log(b.m())
  // console.log(B.m)

• 最后

由于对象总是继承其他对象的，所以可以在任意一个对象中，使用super关键字。

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};

obj.toString();// MyObject: [object Object]

2、原生构造函数的继承

ES5 是先新建子类的实例对象this，再将父类的属性添加到子类上，由于父类的内部属性无法获取，导致无法继承原生的构造函数。

ES6 允许继承原生构造函数定义子类，因为 ES6 是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。

References

ECMAScript 6 入门