一文详解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）

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

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

2、实例属性

在构造函数中通过 this 关键字定义的属性。

每个实例都有独立的实例属性。

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

3、实例方法

定义在类中的方法，供实例调用。

实例方法的 this 指向调用它的实例。

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 关键字定义的方法，直接通过类调用，无需实例化。

静态方法通常用于工具类函数或无需依赖实例的数据。

class MathUtils {
    static add(a, b) {
        return a + b;
    }
}

console.log(MathUtils.add(3, 5)); // 输出: 8

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

使用 static 定义的属性，直接属于类，而不是实例。

通常用于存储类的共享数据。

class Counter {
    static count = 0;

    static increment() {
        this.count++;
    }
}

Counter.increment();
console.log(Counter.count); // 输出: 1

6、继承（extends）

通过继承，可以创建一个基于另一个类的新类。

子类会继承父类的属性和方法。

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、私有字段和方法（#）

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

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