Class的使用，构造方法，实例属性和实例方法，静态属性和静态方法，this和super关键字，类的继承

s6新增了一种定义对象实例的方法，Class（类）这个概念，作为对象的模板。class可以看作只是一个语法糖，通过class关键字，可以定义类。让对象原型的写法更加清晰、更像面向对象编程的语法。

一.  Class的基本用法

1.  constructor方法

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

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

ES6的类，完全可以看作构造函数的另一个写法。类的数据类型就是函数，类本身就指向构造函数。使用时候，类必须使用new调用。

 class Point {
   // ...
 }

 typeof Point // "function"
 Point === Point.prototype.constructor // true   prototype对象的constructor属性，直接指向“类”的本身，这与 ES5 的行为是一致的。

 class Bar {
   doStuff() {
     console.log('stuff');
   }
 }

 var b = new Bar();
 b.doStuff() // "stuff"

类的所有方法都定义在类的prototype属性上面。在类的实例上面调用方法，其实就是调用原型prototype对象上的方法，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。

 class Point {
   constructor() {
   }

   toValue() {
   }
 }

 // 等同于

 Point.prototype = {
   constructor() {},
   toValue() {},
 };

 Object.assign(Point.prototype, {
   toString(){},
 })

2.class的静态属性和实例属性

2.1类的实例属性：类的实例属性可以用等式，写入类的定义之中。（Class 内部只有静态方法，没有静态属性）

 class MyClass {
   myProp = ;

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

为了可读性的目的，对于那些在constructor里面已经定义的实例属性，新写法允许直接列出。

 class ReactCounter extends React.Component {
   state = {
     count:
   };

2.2  类的静态属性：类的静态属性只要在上面的实例属性写法前面，加上static关键字就可以了。

 class MyClass {
   static myStaticProp = ;

   constructor() {
     console.log(MyClass.myStaticProp); //
   }
 }

3. class的静态方法：类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上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指的是类，而不是实例。静态方法可以与非静态方法重名。
 class Foo {
   static bar () {
     this.baz();
   }
   static baz () {
     console.log('hello');
   }
   baz () {
     console.log('world');
   }
 }

 Foo.bar() // hello   静态方法bar调用了this.baz，这里的this指的是Foo类，而不是Foo的实例，等同于调用Foo.baz。

3.1实例方法

 /* --- 实例方法 -- */
 function ClassA() { //定义构造函数
 };
 ClassA.prototype.func = function() { //在构造函数的原型上添加方法
   console.log("This is an instance method.");
 }
 var instance = new ClassA(); //新建一个实例
 ClassA.func(); // Error:ClassA.func is not a function
 instance.func(); //This is an instance method.

上面代码结果报错如下。。。

 // 定义在某个具体对象(实例)上的方法是实例方法
 function ClassA() { //定义构造函数
 };
 var instance = new ClassA(); //新建一个实例
 instance.func = function() {
     console.log("This is an instance method.")
   }
   // ClassA.func(); // Error:ClassA.func is not a function
 instance.func(); //This is an instance method.

4 this和super关键字

4.1   `super`这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。

第一种情况，`super`作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次`super`函数。

4.2

面向对象语言中 this 表示当前对象的一个引用。

但在 JavaScript 中 this 不是固定不变的，它会随着执行环境的改变而改变。

• 在方法中，this 表示该方法所属的对象。
• 如果单独使用，this 表示全局对象。
• 在函数中，this 表示全局对象。
• 在函数中，在严格模式下，this 是未定义的(undefined)。
• 在事件中，this 表示接收事件的元素。
• 类似 call() 和 apply() 方法可以将 this 引用到任何对象。

5 .类的继承

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

class Point {
}

class ColorPoint extends Point {
}