前端JavaScript中的class类

JavaScript中的class类是一种近年来新增的、用于实现面向对象编程（OOP）的语法。OOP是一种封装数据和行为的编程思想，它可以更容易地管理代码和提高代码的复用性。

基本语法

类声明和其他声明很相似。我们使用class关键字开头，后面接类名。类名的首字母要大写。然后我们用一对花括号{}来描述类的块。在花括号中，我们可以定义类的属性和方法。例如下面的代码：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

let tom = new Person("Tom", 29);
tom.sayHi();

上述代码中，我们创建了一个Person类。类中有一个构造函数constructor，它接受两个参数name和age，并将它们分别存储在实例对象中。对于实例方法sayHi，它使用反引号`和${}来格式化字符串，然后输出欢迎语。

最后，我们用实例tom调用了sayHi()方法，并输出了欢迎语。运行这个代码，它会输出以下结果：

Hi, I'm Tom and I'm 29 years old.

属性和方法

在class类中，属性和方法的区别不太明显。它们都被定义在花括号中，并且都可以作用于类的实例。但是，属性通常指代类的实例变量，而方法则指代类的实例方法。例如：

class Car {
  constructor(brand, year) {
    this.brand = brand;
    this.year = year;
  }
  getInfo() {
    return `This car is ${this.brand} made in ${this.year}.`;
  }
  setYear(year) {
    this.year = year;
  }
}

let myCar = new Car("BMW", "2021");
console.log(myCar.getInfo());
myCar.setYear("2022");
console.log(myCar.getInfo());

在上述代码中，我们定义了一个Car类，它有两个属性brand和year，以及两个方法getInfo和setYear。getInfo方法返回一个字符串，描述这个车的品牌和制造年份。setYear方法允许修改这个车的制造年份。

我们首先创建了一个名为myCar的实例，并输出了车的初始信息。然后我们调用setYear方法修改了myCar的制造年份，并再次输出信息。运行这个代码，它会输出以下结果：

This car is BMW made in 2021.
This car is BMW made in 2022.

继承

继承是OOP中一个非常重要的概念。它允许类之间共享属性和方法。在JavaScript中，我们可以使用extends关键字来实现继承。例如：

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  sayHi() {
    console.log(`Hi, I'm ${this.name} and I'm ${this.age} years old.`);
  }
}

class Student extends Person {
  constructor(name, age, school) {
    super(name, age);
    this.school = school;
  }
  study() {
    console.log(`${this.name} is studying at ${this.school} now.`);
  }
}

let tom = new Student("Tom", 18, "MIT");
tom.study();
tom.sayHi();

上述代码中，我们创建了一个Person类，它有两个属性name和age，以及一个方法sayHi。然后我们创建了一个Student类，它继承了Person类，并且额外有一个属性school和一个方法study。在Student的构造函数中，我们通过调用super(name, age)来调用父类的构造函数。这样就能把name和age属性传递给父类。继承使得我们可以重用原有代码，并且可以快速构建新的类。

最后，我们用实例tom调用了study和sayHi方法，并输出了欢迎语和学生信息。运行这个代码，它会输出以下结果：

Tom is studying at MIT now.
Hi, I'm Tom and I'm 18 years old.

总结

本文介绍了JavaScript中的class类的基本语法、属性和方法、以及继承。当你理解了这些知识，就能开始使用class类编写更复杂的应用程序了。

如果你还有其他问题，请参考MDN的文档。