2021/01/01

不知道不觉已经到了2021年，想来时间过的是真快，今年对于我来说，也是不平凡的一年，从离开北京到杭州从新开始，虽然说在2019年在杭州待过一段时间，但也是仅仅两个月而已，今年也是我第一次在杭州经历冬天，说实话，对于在北京熏陶了四年暖气的我，真是有点小小的不适应，所有以前对于杭州的向往，变成对过去暖气的想念，话不多说，来吧，朋友们，让我们展开对未来的向往和期待，共同进步，共同学习。说实话，那一句真是至理名言，好好学习，天天向上。上一篇我们讲了一下关于javaScript的类实例和继承的方式，但是那是ES5的一种书写方式，今天我们讲一下ES6类的构造方式，这个是更接近于java、php等形式，更加清晰、更像面向对象变成语言。

ES6的Class类的基本用法和继承方式

首先让我们看一下他的基本代码

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

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

看到代码是不是感觉很有层次感，当然啦，如果是做过后台的同学，看到这就感觉找到了家..... 上面代码定义了一个“类”，可以看到里面有一个constructor()方法，这就是构造方法，而this关键字则代表实例对象。这种新的 Class 写法，本质上与本章开头的 ES5 的构造函数Point是一致的。

Point类除了构造方法，还定义了一个toString()方法。注意，定义toString()方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以了。另外，方法与方法之间不需要逗号分隔，加了会报错

toString()方法，本质是和ES5的是一样的，都是定义在prototype上面，只是表现形式不一样而已

静态方法

类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。

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

Foo.classMethod() // 'hello'

var foo = new Foo();
foo.classMethod()

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

注意，如果静态方法包含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。另外，从这个例子还可以看出，静态方法可以与非静态方法重名。

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

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

class Bar extends Foo {
}

Bar.classMethod() // 'hello'

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

静态方法也是可以从super对象上调用的。

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

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

Bar.classMethod() // "hello, too"

属性

标准的书写方式，当然属性前加上“_”符号目的就是为了好区分

class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

另外由于ES6对于类中的属性和方法，并没有很完善，并不像一些面向对象语言，属性可以有私有、公共、静态、受保护，函数可以有私有、公共、静态、受保护等一些修饰符，目前的class的类的形式，内部还不是很完善，一些私有、受保护等修饰符等都不支持，当然了可以做一些简单类似的操作，为class加了私有属性。方法是在属性名之前，使用#表示。但是本身平常使用的也少，如果感兴趣，可以自己在深入了解一下，这里不在多做赘述。

继承

继承完成实例

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

class ColorPoint extends Point {
  constructor(x, y, color) {
    this.color = color; // ReferenceError
    super(x, y);
    this.color = color; // 正确
  }
}

另一个需要注意的地方是，在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，基于父类实例，只有super方法才能调用父类实例。子类的constructor方法没有调用super之前，就使用this关键字，结果报错，而放在super方法之后就是正确的。

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

第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B的实例，因此super()在这里相当于A.prototype.constructor.call(this)。

作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

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

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

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

let b = new B();

每日一题

2021/01/01

ES6的Class类的基本用法和继承方式

静态方法

属性

继承