ES6 中类的一些应用

《深入理解ES6》阅读随笔

ES6 中的类，同样具有声明式和表达式两种写法，实现功能基本是一致的，这里不再赘述。接下来我们主要看一下这几方面：访问器属性、生成器方法、可计算变量的运用和静态成员等。

访问器属性

class Person {
  constructor(name) {
    this.name = name;
  }

  get hello() {
    return this.name;
  }

  set hello(name) {
    this.name = name;
  }
}
const person = new Person("Tom");
console.log(person.hello); // Tom
person.hello = "Jack";
console.log(person.hello); // Jack

生成器方法

新的类同样也支持生成器方法：

class Person {
  constructor(name) {
    this.name = name;
  }

  *sayHello() {
    yield "hi,";
    yield "my name is";
    yield this.name;
  }
}

const person = new Person('Tom')
const iPerson = person.sayHello()
console.log(iPerson.next()) // { value: 'hi,', done: false }
console.log(iPerson.next()) // { value: 'my name is', done: false }
console.log(iPerson.next()) // { value: 'Tom', done: false }
console.log(iPerson.next()) // { value: undefined, done: true }

可计算变量的运用

const method = "sayHello";
class Person {
  constructor(name) {
    this.name = name;
  }

  [method]() {
    console.log("My name is " + this.name);
  }
}
const person = new Person("Tom");
person.sayHello(); // My name is Tom

静态成员

在 ES6 的类中，还新增了静态成员的概念，可以在类内部自定义静态方法，该方法只能通过类本身去调用，而不能用实例去调用：

class Person {
  constructor(name) {
    this.name = name;
  }

  sayHello() {
    console.log("my name is " + this.name);
  }

  static getAge(age) {
    console.log("My age is " + age);
  }
}
const person = new Person('Tom')
person.sayHello() // My name is Tom
Person.getAge(10) // My age is 10