es dsl 创建模板

之前都是在es5中创建类的方法，而在es6中为我们提供了更为简单的语法糖供我们创建类，不过其底层还是和之前的原型、原型链相关，所以学习一下还是有必要的，那现在就来看看再es6中我们怎样创建类吧

创建类

class是es6提供给我们创建类的关键字，这样就能和函数有很好的区别了。如果我们要创建一个Person类，方式如下

class Person {}

不过现在也只是定义了一个类而已，这个类中并不包含属性或方法，接下来就看看如何去声明属性与方法

constructor

每一个由class声明的类，都会具有一个构造函数方法constructor，当我们通过new关键字去实例化这个类时，实际上就是调用的该构造函数，之后做的操作就和new一个function创建的对象差不多了，所以在该constructor可以通过this创建属性，并且new操作时，传入的值也会拿到

不写的话默认也会有一个constructor

class Person {
  constructor(name, age) {
    this.age = age
    this.name = name
  }
}
const p = new Person("sakurige", 111)

这里的属性都是，外界可以直接访问的，而在es13中，可以在属性前加上一个#使其变为私有属性，外界只能通过getter``setter进行访问

class Person {
 #name
 constructor(name, age) {
   this.age = age
   this.name = name
 }
 get name(){
   return this.#name
 }
 set name(newName){
   this.#name = newName
 }
}
const p = new Person("sakurige", 111)
console.log(p.#name) // 报错

实例方法

实例方法在之前是挂载到，构造函数的原型上的，这里直接在class中写入方法，就会直接挂载到原型上，所以方法直接写在里面即可

class Person {
  constructor(name, age) {
    this.age = age
    this.name = name
  }
  run() {
    console.log("run")
  }
}
const p = new Person("sakurige", 111)

类方法

类方法是只能通过类名调用的方法，在之前是通过直接在构造函数上添加方法实现的

function Person() {}
Person.hello = function () {
  console.log("hello")
}

在es6中有一个专门的关键字static来声明一个静态方法也就是类方法

class Person {
  static hello() {
    console.log("hello")
  }
}

继承

es6中的继承相对于es5的实现就简单许多，直接通过extends关键字就可以实现

class Person {
  constructor(name, age) {
    this.age = age
    this.name = name
  }
  run() {
    console.log("run")
  }
}
class Teacher extends Person{}
console.log( new Teacher("sakurige", 111))

！！子类中没有constructor时这样写还算可以，但是当自己写了一个constructor后就会报错

class Person {
  constructor(name, age) {
    this.age = age
    this.name = name
  }
}
class Teacher extends Person {
  constructor() {}
}

他告诉我们在子类中使用this之前需要先调用super()，那么接下来看看super有什么作用

super

super 关键字用于访问对象字面量或类的原型（[[Prototype]]）上的属性，或调用父类的构造函数

1. 可以用它来将值传给父类构造函数

class Person {
  constructor(name, age) {
    this.age = age
    this.name = name
  }
}
class Teacher extends Person {
  constructor(name, age, subject) {
    super(name, age)
    this.subject = subject
  }
}
console.log(new Teacher("sakurige", 22, "math"))

2. 可以在子类实例方法中调用父类的实例方法

class Person {
  constructor(name, age) {
    this.age = age
    this.name = name
  }
  run() {
    console.log(this.name + " run")
  }
}
class Teacher extends Person {
  constructor(name, age, subject) {
    super(name, age)
    this.subject = subject
  }
  run() {
    super.run()
    console.log("teacher " + this.name + " run")
  }
}
const t = new Teacher("sakurige", 22, "math")
t.run()

3. 在子类的静态方法中调用父类的静态方法

class Person {
  // #name
  constructor(name, age) {
    this.age = age
    this.name = name
  }
  run() {
    console.log(this.name + " run")
  }
  static hello() {
    console.log("hello person")
  }
}
class Teacher extends Person {
  constructor(name, age, subject) {
    super(name, age)
    this.subject = subject
  }
  run() {
    console.log("teacher " + this.name + " run")
  }
  static hello() {
    super.hello()
    console.log("hello teacher")
  }
}
const t = new Teacher("sakurige", 22, "math")
Teacher.hello()

如果在子类的实例方法中通过super调用了父类的静态方法，或者子类的静态方法中调用了父类的实例方法会报错