超级厉害的JavaScript —— ECMAScript 6 标准（10） —— Class

什么是Class

Class是对象的模板，通过class关键字，可以定义类，起始class只是一个语法糖，它的绝大部分功能都可以用ES5实现。新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法。（只谈ES6语法，不谈ES5实现）

---

基本语法

声明类

声明类需要使用关键字class

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

可以使用表达式的形式定义：

const MyClass = class Me {
  getClassName() {
    return Me.name;
  }
};

let inst = new MyClass();
inst.getClassName() // Me
Me.name // ReferenceError: Me is not defined

此时类名是MyClass，Me只在Class的内部代码可用，并且是可以省略的，指代当前类。
采用Class表达式，可以写出立即执行的匿名Class：

let person = new class {
  constructor(name) {
    this.name = name;
  }

  sayName() {
    console.log(this.name);
  }
}('张三');

person.sayName(); // "张三"

创建实例

使用new命令可以生成类的实例，如果像函数那样调用类就会报错。通过new创建实例的时候其实会调用constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。constructor方法默认返回实例对象（即this）`：

//定义类
class Point {

  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }

}

//创建实例
var point = new Point(2, 3);

point.toString() // (2, 3)

point.hasOwnProperty('x') // true，定义在实例上的属性
point.hasOwnProperty('y') // true，定义在实例上的属性
point.hasOwnProperty('toString') // false，定义在原型上的方法
point.__proto__.hasOwnProperty('toString') // true

实例的属性除非显示定义在其本身（this）上，否则都是定义在原型（class）上的。

属性

ES6规定属性只能在constructor用this定义，这样维护起来非常困难，stage-3有提出了以下定义属性的方法：

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

直接写入类的定义中，这样就可以在实例上使用。

私有属性

ES6本身没提供私有方法的实现，但是我们可以使用Symbol实现：

const myProp = Symbol('myProp');
export default class myClass{
    [myProp] = 42;
    constructor() {
        console.log(this[myProp]); // 42
    }
};

这时因为myProp是Symbol值，导致第三方无法获取到它们，因此达到了私有属性的效果。
目前处于stage-1，但是babel未支持的一个提案，方法是在属性名之前，使用#表示私有：

class Point {
  #x;

  constructor(x = 0) {
    #x = +x;
  }

  get x() { return #x }
  set x(value) { #x = +value }
}

静态属性

同样的，在stage-3的新写法大大方便了静态属性的表述：

// ES6
class Foo {
}
Foo.prop = 1;

// stage-3
class Foo {
  static prop = 1;
}

getter 和 setter

与ES5一样，在Class内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。

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

let inst = new MyClass();

inst.prop = 123;// setter: 123

inst.prop；// 'getter'

方法

定义类的方法时，方法之间不需要逗号分隔，加了会报错，方法名可以使用变量，不过要放在[ ]内，不然会被解析成string。
另外，类的内部所有定义的方法，都是不可枚举的，这一点与ES5的行为不一致。

var method = "func";
class Point {
  constructor(x, y) {}

//方法之间没有逗号
  toString() {}

  [method](){}//方法名叫func
}
Object.keys(Point.prototype)
// []
Object.getOwnPropertyNames(Point.prototype)
// ["constructor","toString"]

私有方法

ES6本身没提供私有方法的实现，但是我们可以使用Symbol实现：

const bar = Symbol('bar');
const snaf = Symbol('snaf');

export default class myClass{

  // 公有方法
  foo(baz) {
    this[bar](baz);
  }

  // 私有方法
  [bar](baz) {
    return this[snaf] = baz;
  }
};

这时因为bar和snaf都是Symbol值，导致第三方无法获取到它们，因此达到了私有方法的效果。

静态方法

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

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

Foo.classMethod() // 'hello'

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

同样的，父类的静态方法，可以被子类继承。

---

继承

类之间的继承通过extends关键字实现：

class ColorPoint extends Point {}

ColorPoint继承了Point的所有属性和方法。但是由于没有部署任何代码，所以这两个类完全一样，等于复制了一个Point。
在部署内部代码的时候，使用super可以调用父类的属性：

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方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。所以ES6的继承机制是，先创造父类的实例对象this（所以必须先调用super方法），然后再用子类的构造函数修改this。
不过子类没有定义constructor方法的话，默认会部署constructor(...args) {super(...args);}

---

几个有用的属性和方法

new.target

new.target在构造函数中返回new命令作用于的那个构造函数：

function Person() {
  console.log(new.target);
}
new Person();
Person();
/*
[Function: Person]
undefined
*/

可以看出，如果构造函数不是通过new命令调用的，new.target会返回undefined，因此这个属性可以用来确定构造函数是怎么调用的。
Class内部使用new.target会返回当前Class，当子类继承父类时，new.targer会返回子类，利用这个特点，就可以写出必须继承才能使用使用的类：

class Shape {
  constructor() {
    if (new.target === Shape) {
      throw new Error('本类不能实例化');
    }
  }
}

class Rectangle extends Shape {
  constructor(length, width) {
    super();
    // ...
  }
}

var x = new Shape();  // 报错
var y = new Rectangle(3, 4);  // 正确

name

name属性总是返回紧跟在class关键字后面的类名。

class Point {}
Point.name // "Point"

Object.getPrototypeOf()

Object.getPrototypeOf方法可以用来从子类上获取父类。

class A {}
class B extends A {}
Object.getPrototypeOf(B) === A;//true

Mixin模式

Mixin模式指的是，将多个类的接口“混入”（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);
    }
  }
}

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

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

需要注意的时mix得到的类的构造函数是空函数，并且定义的实例属性都会全部丢失。