ES6中的class（初识）

1.定义类

类，实际上是一个“特殊的函数”，就像你能定义函数表达式和函数声明一样，你也可以定义类表达式和类声明。

• 1. 类声明
     要声明一个类，可以使用带有class关键字的类名。

class Rectangle{
  constructor(height, width){
    this.height = height
    this.width = width
  }
}

函数声明和类声明之间的区别就是函数声明会变量提升，而类声明不会。你必须先定义一个类，才能去访问它。比如下面的代码会抛出一个reference。

let p = new Rectangle(); // ReferenceError
class Rectangle {}

• 2. 类表达式
     一个类表达式是定义一个类的另一种方式。类表达式可以是具名的或匿名的。
     一个具名类表达式的名称是类内的一个局部属性，它可以通过类本身（而不是类实例）的name属性来获取。

//匿名类表达式
let rectangle = class{
  constructor(height, width){
    this.height = height
    this.width = width
  }
}
console.log(rectangle.name) // rectangle
//具名类表达式
let rectangle = class Rectangle2{
  constructor(height, width){
    this.height = height
    this.width = width
  }
}
console.log(rectangle.name) //Rectangle2

2. 类体和方法定义

1. 构造函数

constructor方法是一个特殊的方法，这种方法用于创建和初始化一个由class创建的对象。一个类只能拥有一个名为"constructor"的特殊方法【一个类，一个constructor】。如果类包含多个constructor的方法，则将抛出 一个SyntaxError

2. 原型方法

class Rectangle{
  constructor(height, width){
      this.height =  height
      this.width = width
  }
  
  //Getter
  get area(){
    return this.calcArea()
  }
  calcArea(){
    return this.height * this.width
  }
}
const square = new Rectangle(10, 10)
console.log(square.area) // 100 

3. 静态方法

static关键字用来定义一个类的一个静态方法。调用静态方法不需要实例化该类，但不能通过一个类实例调用静态方法。静态方法通常用于为一个应用程序创建工具函数。

class Point{
  contructor(x,y){
    this.x = x
    this.y = y
  }
  static distance(a,b){
    const dx = a.x - b.x
    const dy = a.y - b.y

    return Math.hypot(dx, dy)
  }
}
const p1 = new Point(5,5)
const p2 = new Point(10,10)
console.log( Point.distance(p1,p2) )

4. 用原型或静态方法包装

当调用静态或原型方法时没有指定 this 的值，那么方法内的 this 值将被置为 undefined。即使你未设置 "use strict" ，因为 class 体内部的代码总是在严格模式下执行。

class Animal { 
  speak() {
    return this;
  }
  static eat() {
    return this;
  }
}

let obj = new Animal();
obj.speak(); // Animal {}
let speak = obj.speak;
speak(); // undefined

Animal.eat() // class Animal
let eat = Animal.eat;
eat(); // undefined

5.字段声明

• 共有字段声明

class Rectangle {
  height = 0;
  width;
  constructor(height, width) {    
    this.height = height;
    this.width = width;
  }
}

• 私有字段声明

class Rectangle {
  #height = 0;
  #width;
  constructor(height, width) {    
    this.#height = height;
    this.#width = width;
  }
}

从类外部引用私有字段是错误的。它们只能在类里面中读取或写入。通过定义在类外部不可见的内容，可以确保类的用户不会依赖于内部，因为内部可能在不同版本之间发生变化。