关于 ES6 class 类

Question

本文用来记录之前比较少用到的知识点。

一、super 关键字

// 父类
class Person {
  constructor(name) {
    this.name = name
  }
  showName() {
    console.log(`My name is ${this.name}. (class Person)`)
  }
}

// 子类
class Student extends Person {
  constructor(name, skill) {
    // 继承类中的构造函数必须调用 super(...)，并且在使用 this 之前执行它。
    super(name)
    this.skill = skill
  }
}

// 实例
let student = new Student('Frankie', 'JavaScript')
console.log(student)    // Student {name: "Frankie", skill: "JavaScript"}
student.showName()      // My name is Frankie. (class Person)

一个极其简单的例子，问题如下：

1. 假如我们的子类 Student 也有一个 showName() 方法，会怎样呢？

class Student extends Person {
  constructor(name, skill) {
    super(name)
    this.skill = skill
  }
  showName() {
    console.log(`My name is ${this.name}. (class Student)`)
  }
}

那么（从自身找到了，自然停止往原型上找，没毛病）

student.showName()      // My name is Frankie. (class Student)

2. 如果我们既想执行父类 Person 的 showName() 方法， 也要执行子类的 Student 的 showName() 方法，要怎么办呢？

class Student extends Person {
  constructor(name, skill) {
    super(name)
    this.skill = skill
  }
  showName() {
    super.showName()
    console.log(`My name is ${this.name}. (class Student)`)
  }
}

通常我们不想完全替代父类方法，而是在父类方法的基础上调整或扩展其功能。我们进行一些操作，让它之前或之后或在过程中调用父方法。

Class 为此提供了 super 关键字。

• 使用 super.method() 调用父类方法
• 使用 super() 调用父构造函数（仅在 constructor 函数中）

student.showName()      
// My name is Frankie. (class Person)
// My name is Frankie. (class Student)

二、set、get

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

class Student {
  constructor(name, skill) {
    this.name = name
    this.skill = skill
  }

  // 不得有参数（Getter must not have any formal parameters.)
  get age() {
    console.log(`getter`)
  }

  // 必须有一个参数（Setter must have exactly one formal parameter.）
  set age(value) {
    console.log(`setter: ${value}`)
  }
}

let student = new Student('Frankie', 'JavaScript')
student.age = 20    // setter: 20
student.age         // getter