class-类

class只是一个语法糖，它的绝大部分功能，ES5都可以做到。

基本写法

class Person{
    ...
}

class中的实例方法，就是ES5中的原型方法，只是ES5的原型方法可枚举，而class的实例方法不可枚举。

class Person{
    toString(){
        //...
    }
}

//相当于如下写法：

function Person(){}
Person.prototype.toString = function(){
    //...
}

实例方法和属性

实例方法和属性的写法：

• 构造函数里的属性和方法一定是实例属性和方法。
• 直接定义在类的顶层的不加修饰符的属性和方法是实例属性和方法

class Person{
    age = 25; // 实例属性
    habbit; //实例属性
    constructor(name){
        this.name = name; // 实例属性
    }

	//实例方法
	sayName(){
        console.log(this.name);
    }
	//表达式
	[dynamicMethodName](){
        // 该实例方法的名字 取决于 dynamicMethodName 的值。
    }
}

提示

实例属性和方法必须通过实例调用。（傻子都知道吧......）

静态方法和属性

静态属性和方法的写法：

static关键字修饰即可。

class Person{
    static keysName = "staticName";//静态属性
	constructor(name){
        this.name = name; // 实例属性
    }
    //静态方法
    static staticMethod(){
        console.log("静态方法中的this是类，而不是类的实例，这点需要特别注意。")
    }
 	//静态表达式方法
    static [dynamicMethodName](){
         // 该实例方法的名字 取决于 dynamicMethodName 的值。
    }
}

提示

静态属性和方法只能通过类名调用。

私有方法和属性

#修饰属性或方法后就是私有属性和方法。属性和方法名包括#本身。

class Person{
    #privateKys = "private";//私有属性
    constructor(name) {
        this.name = name; //实例属性
    }
    //私有方法
    #privateFunc(){
        console.log("private function!")
    }
}

提示

私有方法和私有属性，是只能在类的内部访问的方法和属性，外部不能访问。 通过实例(this)访问。

取值和存值函数

get、set关键字，对某个属性设置取值和存值函数，以此拦截该属性的存取行为。

class Person{
	constructor(age){
        this.age = age;
    }
    //取值、存值函数
    get Y(){
        return this.age;
    }
    set Y(value){
        console.log("set function used!");
        this.age = value;
    }
}
let wlk = new Person(25);
wlk.Y; // get
wlk.Y = 30; // set

警告

get/set函数名不能用属性的名字，不然会递归调用，形成死循环。

继承

extends和super是继承的关键。

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

class Child extends Parent{
    constructor(name,age){
        super(name); // 必须调用，切必须在开头
        this.age = age;
    }
}

子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象

super关键字相当于父类的this。

class Point{
    constructor(x,y){
        this.x = x;
        this.y = y;
    }
    toString(){
        //...
    }
}

class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 调用父类的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 调用父类的toString()
  }
}

父类的静态属性和方法也会被子类继承。

class A {
  static hello() {
    console.log('hello world');
  }
}

class B extends A {
}

B.hello()  // hello world