ES6Classes

这是构造函数的语法糖，其本质上是完全相同的。

初始化类以及创建一个实例：

class PersonCl {
    constructor(firstName, birthYear){ 
        this.firstName = firstName;
        this.birthYear = birthYear;
    }
}

const jiaqi = new PersonCl("jiaqi", 1999); 

new 的时候发生的事情与构造函数中完全相同。

为这个构造函数添加方法：

class PersonCl {
    constructor(firstName, birthYear){
        this.firstName = firstName;
        this.birthYear = birthYear;
    }

    calAge(){
        // 在这里添加的方法就是在构造函数的 prototype 上添加的，而不是对象本身
        console.log(2024 - this.birthYear);
    }
}

检查一下：

console.log(jiaqi.__proto__ === PersonCl.prototype); // true

getter 和 setter

是特殊的属性，会在获取或设置相关的属性的时候进行计算。

先举一个例子：

const account = {
    owner: 'jiaqi',
    movements: [200, 530, 120, 300],

    get latest() { 
        return this.movements.slice(-1);
    }
}

// 注意，下面这个地方并没有调用函数，而只是读取了 `latest` 这个属性
console.log(account.latest); // [300]

这很像我之前在框架中使用的 计算属性 ：在获取一个属性之前进行相应的计算，返回计算后的结果。

const account = {
    owner: 'jiaqi',
    movements: [200, 530, 120, 300],

    get latest() {
        return this.movements.slice(-1);
    },

    set latest(mov){ 
        this.movements.push(mov);
    }
}

// 不是调用方法，而是给相应的属性赋值
account.latest = 50; 
console.log(account.movements); //[200, 530, 120, 300, 50]

可以使用 getter 和 setter 进行数据的校验：

class PersonCl {
    constructor(fullName, birthYear){
        this.fullName = fullName;
        this.birthYear = birthYear;
    }
    set fullName(name){ 
        if(name.includes(" ")) this._fullName = name;
        else alert(`${name} is not a fullname!`);
    }
    get fullName(){ 
        return this._fullName;
    }
}

const jiaqi = new PersonCl("jia qi", 1999);
console.log(jiaqi.fullName); // jia qi

静态方法

在 JavaScript 中，静态方法是属于一个类的函数，但不与该类的实例绑定。相反，它是在类本身上调用的。静态方法通常用于不需要类实例中任何数据的实用功能。

• 使用 static 关键字定义：在方法名称前加上 static 关键字，即可声明静态方法。
• 在类而非实例上调用：静态方法是直接在类上调用的，而不是在由类创建的对象上调用的。
• 不能访问实例属性或方法：静态方法不能直接访问或修改实例属性或方法；它们只能使用类级属性或自己的局部变量。

继承

两个关键点：extend 关键字和 super() 函数。

class StudentCl extends PersonCl{ 
    constructor(fullName, birthYear, course){
        // super 必须要在最上面
        super(fullName, birthYear);  
        this.course = course;
    }
}