ES6中class类的学习

类是什么？

类：就是具有相同类型的一类实例的逻辑描述

1.1 类的由来

在ES6当中class的绝大部分功能都是可以在ES5当中做到的，那么我们为什么要用新的class写法呢？原因其实很简单。新的class写法知识让对象原型的写法更加清晰 更加的像面向对象编程的语法而已。下面我们来看下传统的写法和改写会有什么样的区别呢！

1. 这个即为传统写法。

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

2. 这个即为用ES6的class改写

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

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

1.2 constructor方法

在上面的代码块当中我们可以看到当中有一个constructor方法。这个就是构造方法而this关键字代表实例对象。就是说，ES5的point构造函数对应的就是ES6的point类的方法。
constructor方法是类的默认方法，通过new命令生成对象实例时，就会自动调用这个方法。简单的说就是类必须有constructor方法，没有写入的话，一个空的constructor方法就会呗默认添加。

class Point {
}

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

在上面代码块中，定义了一个空的类point,JavaScript 引擎会自动为它添加一个空的constructor方法。

1.3 类的实例

既然我们知道什么是类，那么我们也应该知道什么是类的实例，类的实例就是被构造函数出来的具有这个类的实例特征的一个表；

生成类的实例我们需要使用new命令。如果忘记加上new命令而是像函数一样来调用的话，那么就会报错。

class Point {
  // ...
}

// 报错
var point = Point(2, 3);

// 正确
var point = new Point(2, 3);

1.4 类的实例属性、继承

类的实列属性是属于单个对象的，因此必须通过对象来进行访问，类属性是属于整个类本身，因此必须通过类来进行访问。

Class是可以通过extends关键字来实现继承的，相对比原型链实现继承要清晰和方便很多。

class Point {
}

class ColorPoint extends Point {
}

1.5 super关键字和this关键字

1. this关键字就是代表实例对象
2. super关键字既可以当作函数使用也可以当作对象来使用的。

而super的两种情况下使用方法是完全不同的，在第一种情况中，super作为函数调用时，代表的是父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。

class A {}

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

在上面的代码块中，子类B中的super()，代表调用了父类的构造函数。这是必须的，不然就会报错。

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

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

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

let b = new B();

上面代码中，子类B当中的super.p()，就是将super当作一个对象使用。

1.6 类的静态方法和静态属性

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

在这里插入代码片class Foo {
  static classMethod() {
    return 'hello';
  }
}

Foo.classMethod() // 'hello'

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

Foo类的classMethod方法前有static关键字，表明该方法是一个静态方法，可以直接在Foo类上调用（Foo.classMethod()），而不是在Foo类的实例上调用。如果在实例上调用静态方法，会抛出一个错误，表示不存在该方法。

2. 静态属性：静态属性指的是 Class 本身的属性。

因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。现在有一个[提案]提供了类的静态属性，写法是在实例属性的前面，加上static关键字。

// 老写法
class Foo {
  // ...
}
Foo.prop = 1;

// 新写法
class Foo {
  static prop = 1;
}

上面代码中，老写法的静态属性定义在类的外部。整个类生成以后，再生成静态属性。另外，新写法是显式声明（declarative），而不是赋值处理，语义更好。

结尾：今天关于ES6中Class类的基本使用以及继承就先分享到这里了，希望会对大家有所帮助