ES6 类语法：JavaScript 的现代化面向对象编程

Hi，我是布兰妮甜 ！ECMAScript 2015，通常被称为 ES6 或 ES2015，是 JavaScript 语言的一次重大更新。它引入了许多新特性，其中最引人注目的就是类（class）语法。尽管 JavaScript 一直以来都支持基于原型的继承，但新的类语法提供了一种更加直观和易于理解的方式来定义对象构造函数以及它们之间的继承关系。本文将深入探讨 ES6 类语法，包括它的基本用法、静态方法、继承机制以及私有属性等高级特性。

文章目录

一、基础用法

1. 定义一个简单的类

在 ES6 中，class 关键字用于声明一个新的类。每个类都有一个构造函数（constructor），它是实例化时自动调用的方法，用来初始化对象的状态。

// 定义一个名为 Person 的类
class Person {
    // 构造函数
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }

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

// 创建一个 Person 类的新实例
const person = new Person('Alice', 30);
person.greet(); // Hello, my name is Alice

2. 类表达式 vs 类声明

除了上面提到的类声明形式外，还可以使用类表达式来定义类，这允许我们将类赋值给变量或作为参数传递给函数。

// 类表达式
const Animal = class {
    constructor(name) {
        this.name = name;
    }

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

const animal = new Animal('Dog');
animal.speak(); // Dog makes a noise.

二、静态成员

静态成员与类本身关联而不是具体的实例。它们通常用来创建工具函数或工厂方法，可以直接通过类名调用，而不需要先创建实例。

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

    static subtract(a, b) {
        return a - b;
    }
}

console.log(MathUtil.add(5, 7)); // 12
console.log(MathUtil.subtract(10, 4)); // 6

三、继承

ES6 类支持基于 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;
    }

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

const d = new Dog('Mitzie', 'Poodle');
d.speak(); // Mitzie barks.

3.1 超类访问

在子类中，可以通过 super() 来调用父类的构造函数，或者使用 super 来引用父类的方法或属性。

class Parent {
    constructor(value) {
        this.value = value;
    }

    method() {
        console.log(`Parent method called with ${this.value}`);
    }
}

class Child extends Parent {
    constructor(value) {
        super(value); // 调用父类构造函数
    }

    method() {
        super.method(); // 调用父类方法
        console.log(`Child method called`);
    }
}

const child = new Child('test');
child.method();
// 输出:
// Parent method called with test
// Child method called

四、getter 和 setter 方法

ES6 类允许我们定义 getter 和 setter 方法，这有助于封装数据并控制属性的读取和修改方式。

class Book {
    constructor(title, author) {
        this._title = title;
        this._author = author;
    }

    get title() {
        return this._title.toUpperCase();
    }

    set title(newTitle) {
        if (typeof newTitle === 'string') {
            this._title = newTitle;
        } else {
            console.error('Title must be a string.');
        }
    }
}

const book = new Book('Great Expectations', 'Charles Dickens');
console.log(book.title); // GREAT EXPECTATIONS
book.title = 'Oliver Twist';
console.log(book.title); // OLIVER TWIST

4.1 私有属性

从 ES2020 开始，JavaScript 支持私有字段（private fields），这些字段只能在类内部访问，外部无法直接操作。

class Counter {
    #value = 0;

    increment() {
        this.#value++;
        console.log(this.#value);
    }

    reset() {
        this.#value = 0;
    }
}

const counter = new Counter();
counter.increment(); // 1
counter.reset();
counter.increment(); // 1
// counter.#value; // SyntaxError: Private field '#value' must be declared in an enclosing class

五、类的其他特性

5.1 类的静态属性

除了静态方法之外，你也可以为类添加静态属性。静态属性同样属于类本身而不是其实例。

class Example {
    static property = 'static value';

    static getProperty() {
        return this.property;
    }
}

console.log(Example.property); // static value
console.log(Example.getProperty()); // static value

5.2 静态初始化块

从 ES2022 开始，可以在类中使用静态初始化块来执行一些初始化逻辑，这些逻辑仅会在类首次被加载时运行一次。

class Database {
    static #instance;

    static {
        console.log('Initializing database...');
        Database.#instance = new Database();
    }

    constructor() {
        if (Database.#instance) {
            throw new Error('Use Database.getInstance()');
        }
        // 初始化数据库连接等...
    }

    static getInstance() {
        return Database.#instance;
    }
}

// const db1 = new Database(); // Throws error
const db2 = Database.getInstance();

5.3 公共类字段

ES6 还引入了公共类字段的概念，允许我们在类体中直接声明实例属性，而无需在构造函数中手动设置。

class User {
    name = 'Guest'; // 默认用户名
    email;

    constructor(email) {
        this.email = email;
    }
}

const user = new User('[email protected]');
console.log(user.name); // Guest
console.log(user.email); // [email protected]

六、结论

ES6 类语法极大地简化了 JavaScript 中的面向对象编程，使得代码更加结构化和易于维护。随着标准的发展，越来越多的新特性被加入到类系统中，如私有字段、静态属性和支持模块化的改进等。掌握这些知识对于现代 Web 开发者来说是非常重要的，无论是构建小型库还是大型应用，类语法都提供了强大的工具来帮助组织和管理代码。

以上就是关于 ES6 类语法的详细讲解。希望这篇文章能够帮助你更全面地理解这一关键特性，并将其应用于实际项目开发之中。