ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。

定义类

定义类有两种方式，一个是通过 类声明 的方式，另外一种是通过 类表达式 来定义。

类声明

类似于函数声明一样，我们可以通过带有 class 的关键字的类名来定义。

  1. class Rectangle{
  2.     constructor(height,width){
  3.       this.height = height;
  4.     this.weight = width
  5.   }
  6. }

提升

函数声明 和 类声明 中有一个重要的区别是，函数声明可以提升，而类声明不行（同样地，在函数表达式中和类表达式中同样不行）。
因此，类似这样的代码将会抛出异常。

  1. let p = new Rectangle(10,10);
  2. // ReferenceError
  4. class Rectangle{
  5.     constructor(height,width){
  6.       this.height = height;
  7.     this.width = width;
  8.   }
  9. }

类表达式

一个类表达式是定义一个类的另一种方式。

  1. // 匿名
  2. let Rectangle = class {
  3.     constructor(height, width){
  4.       this.height = height;
  5.     this.width = width;
  6.   }
  7. }
  9. // 被命名
  10. let Rectangle = class Rectangle{
  11.     constructor(height, width){
  12.       this.height = height;
  13.     this.width = width;
  14.   }
  15. }

类体和方法定义

原型方法

  1. class R{
  2.     constructor(width,height){
  3.     this.width = width;
  4.     this.height = height;
  5.   }
  7.   // getter
  8.   get area(){
  9.       return this.calcArea()
  10.   }
  12.   calcArea(){
  13.       return this.width*this.height
  14.   }
  15. }
  16. let a = new R(10,10);
  18. console.log(a.area)
  19. // 100

这里需要注意几点。

  1. 在类定义中，构造函数、方法等其他语句块中，不用像对象里用 “,” 分割开来，其次，在 getter 中的函数不用加括号（）。

静态方法

static 关键字用来定义一个类的一个静态方法。调用静态方法不需要 实例化 这个类， 且不能通过类的实例对象来调用这个静态方法 。

  1. class Point {
  2.     constructor(x, y) {
  3.         this.x = x;
  4.         this.y = y;
  5.     }
  7.     static distance(a, b) {
  8.         const dx = a.x - b.x;
  9.         const dy = a.y - b.y;
  11.         return Math.hypot(dx, dy);
  12.     }
  13. }
  15. const p1 = new Point(5, 5);
  16. const p2 = new Point(10, 10);
  18. console.log(Point.distance(p1, p2));

字段声明

字段声明分为共有字段和私有字段

公有字段

  1. class Rectangle{
  2.     width = 10;
  3.     height;
  4.     constructor(width,height){
  5.       this.width = width;
  6.     this.height = height;
  7.   }
  8. }

私有字段

  1. class Rectangle{
  2.     #width = 10;
  3.   #height;
  4.   constructor(width,height){
  5.       this.#width = width;
  6.     this.#height = height;
  7.   }
  8. }

从类外部引用私有字段将是错误的，它们只能在类里读取或写入。

子类

我们使用 extends 来创建子类

  1. class Animal{
  2.     constructor(name){
  3.       this.name = name
  4.   }
  5.   speak(){
  6.       console.log(this.name + "makes a noise");
  7.   }
  8. }
  10. class Dog extends Animal{
  11.     // 可以没有这中间的部分，那么 Dog 类将于 Animal 类完全拥有相同的属性与方法
  12.   speak(){
  13.       console.log(this.name + "barks" )
  14.   }
  15. }
  17. let d = new Dog("Xirui");
  18. d.speak();    // Xirui barks

使用 super 调用超类

  1. class Cat { 
  2.   constructor(name) {
  3.     this.name = name;
  4.   }
  6.   speak() {
  7.     console.log(this.name + ' makes a noise.');
  8.   }
  9. }
  11. class Lion extends Cat {
  12.   speak() {
  13.     super.speak(); // 调用类父类的方法
  14.     console.log(this.name + ' roars.');
  15.   }
  16. }