一文详解javascript语言中的类(class)

什么是类？

• 在 JavaScript 中，类（class）是用于创建对象的模板或蓝图，提供了一种更直观的方式来定义对象的属性和行为。类允许你定义对象的结构和功能，并通过实例化类来创建具有相同结构的多个对象。
• 类在 JavaScript 中是随着 ES6（ECMAScript 2015）引入的，虽然它本质上是语法糖（更容易阅读的语法），但底层仍然利用了 JavaScript 原本基于原型的继承机制。

为什么定义类？

• 类提供了一种组织代码的方式，尤其适合面向对象编程（OOP）的场景。
• 它使代码更加模块化、可复用、可扩展。
• 通过类，可以轻松地创建多个对象实例并管理它们的属性和行为。

如何定义一个类？

以下是 JavaScript 中定义类的语法：

class 类名 {
    // 构造函数（定义类的属性）
    constructor(参数1, 参数2, ...) {
        this.属性1 = 参数1;
        this.属性2 = 参数2;
    }

    // 方法（定义类的行为）
    方法名() {
        // 方法逻辑
    }

    // 静态方法（直接通过类调用，无需实例化）
    static 静态方法名() {
        // 方法逻辑
    }
}

// 创建类的实例
const 实例 = new 类名(参数1, 参数2);

类的用途

• 创建对象的模板：类提供了一种结构化的方式来定义对象的属性和方法。通过类，可以方便地创建具有相同属性和行为的多个对象。
• 代码复用：类支持继承（extends），可以通过继承实现代码复用。
• 模块化设计：通过类组织代码，使代码更加清晰、易于维护。
• 面向对象编程（OOP）：类是 OOP 的核心概念，提供了封装、继承、多态等特性，使代码更加抽象化和模块化。
• 用于表示现实世界中的实体（如用户、订单、产品）
• 用于封装特定功能或逻辑
• 用于组织和复用代码

类中可以包含什么？

1、构造函数（constructor）

• 用于初始化对象的属性。
• 每个类只能有一个构造函数。
• 构造函数在创建对象时自动调用。

2、实例属性

• 在构造函数中通过 this 关键字定义的属性。
• 每个实例都有独立的实例属性。

  1 2 3 4 5 6

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

3、实例方法

• 定义在类中的方法，供实例调用。
• 实例方法的 this 指向调用它的实例。

  1 2 3 4 5 6 7 8 9 10 11 12

  class Person {     constructor(name) {         this.name = name;     }       greet() {         console.log(`Hello, my name is ${this.name}`);     } }   const p = new Person("Alice"); p.greet(); // 输出: Hello, my name is Alice

4、静态方法（static）

• 使用 static 关键字定义的方法，直接通过类调用，无需实例化。
• 静态方法通常用于工具类函数或无需依赖实例的数据。

  1 2 3 4 5 6 7

  class MathUtils {     static add(a, b) {         return a + b;     } }   console.log(MathUtils.add(3, 5)); // 输出: 8

5、静态属性（实验特性）

• 使用 static 定义的属性，直接属于类，而不是实例。
• 通常用于存储类的共享数据。

  1 2 3 4 5 6 7 8 9 10

  class Counter {     static count = 0;       static increment() {         this.count++;     } }   Counter.increment(); console.log(Counter.count); // 输出: 1

6、继承（extends）

• 通过继承，可以创建一个基于另一个类的新类。
• 子类会继承父类的属性和方法。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  class Animal {     constructor(name) {         this.name = name;     }       speak() {         console.log(`${this.name} makes a sound.`);     } }   class Dog extends Animal {     speak() {         console.log(`${this.name} barks.`);     } }   const dog = new Dog("Buddy"); dog.speak(); // 输出: Buddy barks.

7、私有字段和方法（#）

• 私有字段和方法以 # 开头，只能在类的内部访问。

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

  class BankAccount {     #balance = 0;       deposit(amount) {         if (amount > 0) {             this.#balance += amount;         }     }       getBalance() {         return this.#balance;     } }   const account = new BankAccount(); account.deposit(100); console.log(account.getBalance()); // 输出: 100 console.log(account.#balance); // 报错: 私有字段无法从外部访问

完整实例

以下是一个完整的类的示例：

class Car {
    static totalCars = 0; // 静态属性

    constructor(brand, model, year) {
        this.brand = brand; // 实例属性
        this.model = model;
        this.year = year;
        Car.totalCars++; // 增加总数
    }

    // 实例方法
    describe() {
        console.log(`${this.brand} ${this.model} (${this.year})`);
    }

    // 静态方法
    static getTotalCars() {
        return Car.totalCars;
    }
}

// 创建实例
const car1 = new Car("Toyota", "Corolla", 2020);
const car2 = new Car("Honda", "Civic", 2022);

// 调用实例方法
car1.describe(); // 输出: Toyota Corolla (2020)
car2.describe(); // 输出: Honda Civic (2022)

// 调用静态方法
console.log(Car.getTotalCars()); // 输出: 2