JS：类 class

在 JavaScript 中，class 是用于定义类（Class）的关键字。类是面向对象编程（OOP）的核心概念，它提供了一种更清晰、更结构化的方式来创建对象和管理继承关系。以下是关于 class 的详细说明：

1. 类的基本语法

使用 class 关键字可以定义一个类。类通常包含构造函数、实例方法、静态方法和静态属性。

语法：

class ClassName {
  constructor(/* 参数 */) {
    // 初始化属性
  }

  // 实例方法
  methodName() {
    // 方法逻辑
  }

  // 静态方法
  static staticMethodName() {
    // 静态方法逻辑
  }

  // 静态属性
  static staticPropertyName = value;
}

示例：

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

  // 实例方法
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }

  // 静态方法
  static info() {
    console.log("This is a Person class.");
  }

  // 静态属性
  static species = "Human";
}

const person = new Person("Alice", 25);
person.greet(); // 输出: Hello, my name is Alice
Person.info();  // 输出: This is a Person class.
console.log(Person.species); // 输出: Human

2. 类的组成部分

(1) 构造函数 (constructor)：

• 构造函数用于初始化对象的属性。

• 当使用 new 关键字创建类的实例时，构造函数会被自动调用。

示例：

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

const person = new Person("Alice");
console.log(person.name); // 输出: Alice

(2) 实例方法：

• 实例方法是类的原型方法，可以被类的实例调用。

• 实例方法可以访问实例的属性（通过 this）。

示例：

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

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person("Alice");
person.greet(); // 输出: Hello, my name is Alice

(3) 静态方法 (static)：

• 静态方法属于类本身，而不是类的实例。

• 静态方法通过类名调用，而不是实例。

示例：

class Person {
  static info() {
    console.log("This is a Person class.");
  }
}

Person.info(); // 输出: This is a Person class.

(4) 静态属性 (static)：

• 静态属性属于类本身，而不是类的实例。

• 静态属性通过类名访问。

示例：

class Person {
  static species = "Human";
}

console.log(Person.species); // 输出: Human

3. 类的继承 (extends)：

• 使用 extends 关键字可以实现类的继承。

• 子类会继承父类的属性和方法，同时可以定义自己的属性和方法。

示例：

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

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 调用父类的构造函数
    this.breed = breed;
  }

  bark() {
    console.log(`${this.name} barks!`);
  }
}

const dog = new Dog("Buddy", "Golden Retriever");
dog.speak(); // 输出: Buddy makes a noise.
dog.bark();  // 输出: Buddy barks!

4. 类的特性

(1) 没有变量提升：

• 类声明不会被提升，必须在定义后才能使用。

示例：

const person = new Person("Alice"); // 报错: Person is not defined

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

}

(2) 受块级作用域限制：

• 类声明受块级作用域的限制。

示例：

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

  const person = new Person("Alice");
  console.log(person.name); // 输出: Alice
}

const person = new Person("Alice"); // 报错: Person is not defined

(3) 方法之间不需要逗号：

• 类中的方法之间不需要逗号分隔。

示例：

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

  greet() {
    console.log(`Hello, ${this.name}`);
  }

  sleep() {
    console.log(`${this.name} is sleeping.`);
  }
}

5. 类的实际应用

• 封装：将数据和操作数据的方法封装在一个类中。

• 继承：通过继承实现代码复用。

• 多态：子类可以重写父类的方法，实现不同的行为。

示例：

class Shape {
  constructor(color) {
    this.color = color;
  }

  draw() {
    console.log(`Drawing a ${this.color} shape.`);
  }
}

class Circle extends Shape {
  constructor(color, radius) {
    super(color);
    this.radius = radius;
  }

  draw() {
    console.log(`Drawing a ``{this.color} circle with radius ``{this.radius}.`);
  }
}

const circle = new Circle("red", 10);
circle.draw(); // 输出: Drawing a red circle with radius 10.

6. 总结

• class 是 JavaScript 中定义类的关键字。

• 类包含构造函数、实例方法、静态方法和静态属性。

• 通过 extends 实现继承。

• 类提供了更清晰、更结构化的方式来创建对象和管理继承关系。